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读 懂 本 书 


兴趣 是 第 一 位 老师 

歌德 说 过 :“ 哪 里 没有 兴趣 ， 哪 里 就 没有 记忆 。” 技 术 会 有 非常 多 的 知识 点 需要 记忆 ， 为 
了 帮助 读者 容易 地 记 住 ， 在 本 书 中 ， 笔 者 收集 了 很 多 有 趣 的 技术 背景 资料 ， 期 望 读 者 都 能 够 
爱 上 JavaScript， 爱 上 它 所 应 用 的 各 行 各 业 。 


还 记得 儿 时 的 故事 吗 

小 时 候 ， 总 是 偷偷 地 跑 到 老大 爷 那里 听 他 讲 过 去 奇 奇怪 怪 的 故事 。 后 来 ， 读 了 书 ， 上 了 
学 ， 才 知道 那 是 历史 。“ 读 史 使 人 明智 ， 读 诗 使 人 灵 透 ， 数 学 使 精细， 物理 使 深沉， 伦理 
使 人 庄重 ,逻辑 修辞 使 人 善 辩 。” 英 国 哲 学 家 弗朗西斯 培根 把 历史 列 在 各 科 之 首 ， 足见 其 重 
要 性 。 中 国 古 言 道 “ 知 古 可 以 鉴 今 ” 本 书 不 仅 讲 技术 还 介绍 了 相关 技术 的 来 龙 去 脉 ,通过 这 
些 ， 让 我 们 可 以 做 一 个 有 方向 感 的 技术 开发 者 。 


基础 知识 与 发 展 趋势 

庄子 说 过 :“ 水 之 积 也 不 厚 ,， 则 其 负 大 舟 也 无 力 ” 所 以 本 书 不 仅 介 绍 了 JavaScript 当下 最 
主流 和 热门 的 发 展 应 用 , 还 包括 JavaScript 原生 语法 基础 及 其 应 用 , 尤其 是 对 初学 时 需要 注意 
的 方方面面 均 有 提示 ， 以 帮助 读者 少 走 弯路 。 


本 书 改版 说 明 


Web 前 端 技术 日 新 月 异 ，jQuery、Nodejs 还 有 HTMLS 的 变化 都 非常 大 ， 为 了 跟 上 前 端 
的 变化 ， 本 书 也 进行 了 更 新 ，jQuery 已 经 从 当初 的 1.X 升级 到 了 3.X，Node.js 也 从 0.X 更 新 
到 了 8.X，HTML5 和 CSS3 也 完成 了 定稿 ， 并 确定 了 各 种 技术 的 使 用 场景 。 

这 是 一 本 实例 书 ， 也 是 一 本 引导 书 ， 本 书 是 要 教会 你 写 代码 ， 而 不 是 教会 你 语法 。 本 书 
涉及 的 工具 和 技术 如 下 。 


本 书 涉及 的 软件 或 工具 


Firebug Aptana Studio MySQL 
EditPlus Google Chrome MongoDB 
Dreamweaver Mozilla Firefox Photoshop 
Sublime Text Internet Explorer Nginx 
WebStorm SQL Server 

本 书 涉及 的 技术 或 框架 
CSS3 Canvas Express 框架 
CSS Sprites HTMLS Video Connect 
Transform HTMLS Audio Socket.IO 
用 户 体验 SVG WebSocket 
jQuery LocalStorage node-formidable 
jQuery UI SessionStorage ejs 
AJAX IndexedDB 闭 包 
DHTML Node.js 重 构 
JSON CommonJS 防止 变量 污染 
JSONP MIME Masonry 
HTML5 HTTP 延迟 加 载 
正则 NPM 

本 书 涉 及 的 一 些 案例 
淘宝 工具 “如 意 淘 ” 自 定义 树 控件 
搜狗 云 输入 法 淘宝 哇 哦 
有 道 云 笔记 一 一 网 页 剪报 重大 哀悼 日 的 黑白 滤 镜 
小 米 手 机 产品 图 集 页 面 打 飞 机 
自己 动手 构造 一 个 Web 服务 器 哆 啦 A 梦 
基于 Express 框架 的 HTTP 服务 器 图 片 的 压缩 和 解压 
构造 一 个 基于 Socket 的 聊天 系统 Dos 攻击 与 防范 


本 书 特点 


@ 本 书 不 是 纯粹 的 理论 知识 介绍 ， 也 不 是 高 深 的 技术 研讨 ， 完 全 从 基础 出 发 ， 用 
最 简单 的 、 典 型 的 示例 引申 出 核心 知识 ， 最 后 指出 了 通 往 “高 精 尖 ”进一步 深 
入 学 习 的 道路 。 

@ 本 书 没有 深入 介绍 菜 一 个 知识 块 ， 而 是 全 面 介绍 JavaScript 涉及 的 前 端 领域 、 
后 端 应 用 范围 ， 能 够 系统 性 地 观看 到 这 门 语言 的 全 貌 ， 以 便 在 学 习 的 过 程 中 不 
至 于 迷失 方向 。 


日 本 书 人 文 与 技术 结合 ， 基 础 与 参考 结合 ， 有 大 量 的 名 人 名 言 、 名 人 轶 事 和 参考 
资料 ， 能 激活 读者 的 阅读 兴趣 且 能 够 时 时 为 读者 提供 参考 。 

日 本 书 旨 在 引导 读者 进行 更 多 技术 上 的 创新 ， 每 章 最 后 都 会 用 技术 点 参考 的 方式 
扩大 读者 的 阅读 范围 。 


日 本 书 代 码 遵 循 重 构 原 理 ， 避 免 代码 污染 ， 真 心 希望 读者 能 编写 出 优秀 的 、 简 洁 
的 、 可 维护 的 代码 。 


适用 读者 

爱好 网 页 设计 的 大 中 专 院 校 或 职 校 的 学 生 。 
准备 从 事前 端 开 发 的 人 员 。 

喜欢 或 从 事 网 页 设计 并 对 前 端 感 兴趣 的 人 员 。 
想 扩 展 前 端 知 识 面 的 读者 。 
JavaScript、jQuery、Node.js 的 爱好 者 。 


下 载 地 址 
本 书 示例 源 代码 下 载 地 址 (注意 数字 与 字母 大 小 写 ) 如 下 : 
https://pan.baidu.com/s/1Bp4FRpOERC9ghpjOPY2xHg 





(密码 : ha6w) 

也 可 扫描 右边 二 维 码 获取 网 址 。 如 果 下 载 有 问题 ， 请 联系 电子 邮箱 booksaga@163.com， 
邮件 主题 为 “JavaScript 实战 一 一 JavaScript、jQuery、HTML5、Node.js 实例 大 全 (第 2 版 )”。 

本 书 由 张 泽 娜 主笔 ， 其 他 参与 创作 的 还 有 王晓华 、 常 新 峰 、 林 龙 、 王 亚 飞 、 薛 兹 、 王 刚 、 
李 雷 霆 、 管 书香 、 薛 福 辉 、 陈 晓 开 、 陈 云 香 ， 排 名 不 分 先后 。 





编 者 
2018 年 3 月 
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1.1.1 浏览 器 战争 … 





1.1.3 DHTML、DOM 和 W3C .… 
ne 6 
配置 JavaScript 开发 环境 ..… 
1.2.1 EditPlus 
1.2.2 ”Adobe Dreamweaver... 














1.2.3 Sublime Text 
Be nm 9 
1.2.5 Aptana Studio 
在 Web 页面 中 使 用 JavaScript.… 
1.3.1 直接 内 嵌 JavaScript 代码 … 
1.3.2 引用 JavaScript 文件 wk 
tn 13 
1.4.1 熟悉 语法 .… 
1.4.2 ”自动 完成 .… 
1.4.3 ”使 用 成 熟 框架 和 便捷 工具 .. 
相关 参考 … 
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最 简单 的 表单 验证 一 一 禁止 空白 的 必 填 项 目 . 
2.1.1 最 简单 表单 的 HTML 结构 . 
2.1.2 ” 绑 定 验 证 功能 
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2 和 3 -时 定 验证 的 另 二 种 办 6s dei 21 
2.2.1 input、 textarea、hidden 和 button 
2.2.2 checkbox、 radio 和 select 
用 正则 来 校 验 复杂 的 格式 要 求 
2.3.1 认识 JavaScript 正则 … 
2.3.2 ”JavaScript 正则 符号 及 其 说 明 .. 
2.3.3 ”正则 验证 输入 邮箱 .. 
改善 用 户 体验 .…… 
2.4.1 什么 是 用 户 体验 .. 
2.4.2 ”表单 的 用 户 体验 改善 … 
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a ee nd 
3.1.1 HTML、CSS 和 JavaScript 的 分 层 关 系 
3.1.2 ”照片 展示 功能 设计 
照片 加 载 与 定位 …….…………… 
3.2.1 HTML 代码 . 
3.2.2 CSS 代码 . 
3.2.3 JavaScript 代码 
响应 鼠标 动作 .pp 
3.3.1 ”响应 小 照片 单 击 动作 
3.3.2 ”响应 小 照片 上 一 组 或 下 一 组 单 击 动作 . 
,| 
3.4.1 常见 键盘 按键 对 应 的 ASCII 码 值 
3.4.2 ”响应 键盘 动作 
代码 分 离 带 来 的 红利 … 




























AJAX 一 无 刷新 的 用 户 体验 oases 53 


Re 多 






4.1.1 AJAX 是 技术 不 是 编程 语言 
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4.1.4 AJAX 是 如 何 工 作 的 .6sossssosownnsss 
XMLHttpRequest 对 象 的 常见 方法 和 
4.2.1 XMLHttpRequest 对 象 方法 
4.2.2 XMLHttpRequest 对 象 属性 
检查 待 注册 的 用 户 名 是 否 存在 
4.3.1 客户 端 进行 检测 .…. 
4.3.2 ”服务 器 端 获取 数据 . 
用 AJAX 提交 数据 给 服务 器 .. 
4.4.1 客户 端 部 分 …. 
4.4.2 ”服务 端 部 分 … 
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5.1.1 瀑布 流 是 不 是 万 金 油 
5.1.2” 穿 过 瀑布 流 看 水 帘 洞 
固定 列 宽 的 简单 瀑布 流 实现 .……. 
5.2.1 简单 的 HTML 结构 
5.2.2 ”让 瀑布 流动 起 来 
非 固定 列 宽 的 复杂 瀑布 流 .… 
5.3.1 非 固定 列 宽 瀑 布 流 的 争议 
5.3.2 ”用 Masonry 实现 任意 非 固定 列 宽 瀑布 流 . 
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树 视图 的 最 简化 实现 
6.2.1 树 视图 的 HTML 结构 和 数据 结构 … 
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8.4.1 各 浏览 器 对 datalist 的 支持 情况 . 
8.4.2 各 浏览 器 datalist 的 效果 对 比 .……… 
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9.5:1 界面 设计 eeeeeeesrs 
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第 1 章 ” JavaScript 概述 


一 一 弗 里 德里 希 。 威 廉 。 尼 采 





本 书 将 用 新 颖 的 视角 去 认识 JavaScript， 通 过 流行 简单 的 实例 深度 阐述 JavaScript 的 特 
性 ， 尽 量 利用 IT 世界 里 有 意思 的 东西 来 激发 读者 的 学 习 兴 趣 。 本 章 将 概括 性 地 介绍 
JavaScript 的 基本 特点 ， 绕 开 千篇一律 的 语法 叙述 ， 直 接 讲解 JavaScript 领域 中 的 常见 术语 。 
工 欲 善 其 事 必 先 利 其 器 ， 笔 者 首先 推荐 一 些 非常 优秀 的 开发 工具 并 进行 简要 说 明 ， 读 者 可 根 
据 自身 情况 选择 适合 自己 的 工具 。 

本 章 主要 内 容 : 

@ JavaScript 是 “ 活 ” 语 言 

e@ JavaScript 开发 工具 





1.1 认识 JavaScript 


JavaScript 是 一 个 被 埋没 很 久 的 编程 语言 ， 它 早 在 
1995 年 就 被 布 兰 登 。 艾 奇 (Brendan Eich) 设计 出 来 
了 。 

网 景 (Netscape) 公司 最 初 将 其 脚本 语言 命名 为 
LiveScript， 在 与 Sun 合作 之 后 将 其 改名 为 JavaScript， 
随 着 Netscape Navigator 2.0〈 见 图 1-1) 公布 于 世 ， 虽 
然 想 要 师 出 名 门 的 效果 ， 但 是 网 景 公 司 却 把 它 作为 非 程 
序 人 员 的 编程 语言 来 推广 和 宣传 ， 非 程序 开发 者 并 不 对 
其 买账 ，JavaScript 由 此 被 埋没 长 达 十 年 之 久 。 但 是 
JavaScript 的 确 具有 很 多 优秀 的 特点 ， 近 几 年 的 发 展 势 
头 越 来 越 好 ， 预 示 着 JavaScript 春天 般 的 前 景 。 





1.1.1 浏览 器 战争 1-1 十 几 年 前 JavaScript 的 起 源 浏览 器 
Netscape Navigator 2.0 


JavaScript 一 生 下 来 就 和 浏览 器 绑 在 一 起 ， 它 的 发 


展 史 就 是 一 部 浏览 器 的 战争 史 。 在 JavaScript 1.0 时 期 ，Netscape Navigator 主宰 着 浏览 器 市 
场 ， 微 软 正则 只 是 个 跟班 。 

在 微软 发 布 正 3.0( 见 图 1-2) 的 同时 也 发 布 了 VBScript 语言 ， 同 时 以 JScript 的 名 称 发 
布 了 一 个 类 似 JavaScript 的 东西 ， 由 此 缩短 了 与 Netscape Navigator 的 差距 ， 第 一 次 浏览 器 世 
界 大 战 由 此 展开 。 











图 1-2 正 早 期 8 个 版 本 的 LOGO 图 标 


面 对 党 争 ， 网 景 (Netscape) 公司 与 Sun 公司 联合 欧洲 计算 机 制造 商 协会 (ECMA) 对 
JavaScript 语言 进行 了 标准 化 ， 于 是 出 现 了 ECMA-262 标准 。 由 此 可 见 ， 标 准 不 过 是 为 了 竞 
争 而 存在 的 武器 。 

直到 1997 年 10 月 ， 微 软 IE 浏览 器 发 布 4.0 版 本 ， 但 是 其 市 场 份额 仍然 不 足 两 成 ， 网 景 
则 占据 七 成 。 

1999 年 IE 5$.0 发 布 ，IE 5.0 对 CSS 1 和 CSS 2 的 支持 使 得 文本 泻 染 得 到 了 增强 。 

2001 微软 发 布 了 最 具 里 程 碑 意 义 的 IE 6.0 浏览 器 ， 也 是 在 这 个 时 候 ， 微 软 似乎 为 其 浏览 
器 选 定 了 正确 的 方向 。2002 年 微软 彻底 打败 网 景 ， 占 有 九 成 的 市 场 份额 ， 而 且 与 Windows 
XP 的 黄金 组 合 统治 了 互联 网 多 年 ， 到 2004 年 市 场 份额 达到 了 历史 最 高 点 的 百 分 之 九 十 多 。 

第 一 次 浏览 器 世界 大 战 宣告 结束 。 

2003 年 7 月 ， 网 景 将 Netscape 浏览 器 源 代码 开源 ， 同 时 建立 Mozilla Foundation。2004 
年 11 月 ，Mozilla 发 布 第 一 款 Firefox 浏览 器 。 第 二 次 浏览 器 世界 大 战 爆发 ， 时 至 今日 ，2008 
年 Google 发 布 的 Chrome 浏览 器 、1996 年 发 布 的 Opera 浏览 器 、2003 年 苹果 发 布 的 Safari 浏 
览 器 仍 在 混战 中 。 图 1-3 是 几 个 具有 自主 技术 的 浏览 器 LOGO。 


,OO 





图 1-3 主流 浏览 器 LOGO 


遗憾 的 是 ， 大 多 数 国产 浏览 器 都 是 OEM“ 贴 牌 加 工 ” 后 的 产物 ， 但 是 在 浏览 器 世界 大 战 
中 同样 可 见 它们 的 身影 ， 而 且 它们 还 把 战线 延伸 到 手机 上 ， 如 百度 浏览 器 、 傲 游 浏览 器 、360 
浏览 器 、QQ 浏览 器 、 搜 狗 浏 览 器 、 金 山猫 豹 浏览 器 、 淘 宝 浏览 器 、UC 浏览 器 等 。 


1.1.2 寡 生 语言 


ECMA-262 标准 〈 第 2 段 ) 说 : “ECMAScript 可 以 为 不 同 种 类 的 宿主 环境 提供 核心 的 脚 
本 编程 能 力 ， 因 此 核心 的 脚本 语言 是 与 任何 特定 的 宿主 环境 分 开 进 行规 定 的 ……” 

有 宿主 当然 就 有 寄生 ， 浏 览 器 对 于 ECMAScript 来 说 是 一 个 宿主 环境 ， 但 它 并 不 是 唯一 
的 宿主 环境 ， 比 如 本 书 第 21 章 要 讲 的 Nodejs 也 是 它 的 一 个 宿主 环境 ， 还 有 大 部 分 国产 浏览 
器 大 都 只 是 把 宿主 环境 给 美化 一 下 ， 其 核心 依然 要 “进口 ”。 

JavaScript 和 ECMAScript 之 间 的 关系 如 图 1-4 所 示 ，JavaScript 包括 ECMAScript、DOM 
(文档 对 象 模型 ) 和 BOM (浏览 器 对 象 模型 ) 。 





JavaScript 








ECMAScript BOM 























1-4 JavaScript 和 ECMAScript 之 间 的 关系 


由 图 1-4 可 见 ，ECMAScript 是 独立 于 DOM 和 BOM 的 ，ECMAScript 仅仅 是 一 个 描述 ， 
定义 了 脚本 语言 的 所 有 属性 、 方 法 和 对 象 。 其 他 语言 可 以 实现 ECMAScript 来 作为 功能 的 基 
准 ，JavaScript 就 是 这 样 ， 如 图 1-5 所 示 ， 它 是 JavaScript 的 一 部 分 ， 也 可 以 是 其 他 语言 的 一 
部 分 ， 如 Flash 中 的 ActionScript。 

ECMAScript 


JavaScript ActionS cript ScriptEase 
图 1-5 ECMAScript 和 其 他 语言 的 关系 


JavaScript 具有 强悍 的 寄生 能 力 ， 除 了 用 在 浏览 器 上 ， 还 广泛 用 于 服务 器 、PC、 笔 记 本 
电脑 、 平 板 电脑 和 智能 手机 等 设备 上 。JavaScript 嵌入 的 设备 类 型 丰富 、 数 量 庞 大 ， 所 以 是 世 
界 上 最 流行 的 编程 语言 。 





1.1.3 DHTML、DOM 和 W3C 
浏览 器 的 竞争 和 发 展 大 幅 扩 展 了 DOM， 使 得 通过 JavaScript 完成 的 功能 大 大 增强 ， 而 网 


页 设计 人 员 也 接触 到 一 个 新 名 词 : DHTML (Dynamic HTML ) 。 

DHTML 不 是 语言 ， 它 和 本 书 第 4 章 讲解 的 AJAX 是 同样 性 质 的 东西 ， 它 不 是 一 种 标准 
或 规范 ， 只 是 一 种 将 目前 已 有 的 网 页 技术 、 语 言 标准 整合 运用 的 方式 。 

由 于 浏览 器 发 展 的 早期 ， 各 个 开发 商 在 扩展 DOM 时 采用 了 不 同 的 实现 方法 ， 于 是 就 形 
成 了 各 种 不 同 的 浏览 器 差异 问题 一 一 也 就 是 今天 令 各 种 前 端 开 发 和 设计 人 员 头 痛 的 “浏览 器 
兼容 性 ”问题 。 于 是 开发 者 为 同一 个 网 页 写 两 份 以 上 的 代码 才能 完成 工作 ， 这 是 一 件 相当 痛 
苦 的 事情 。 

W3C 即 万 维 网 联盟 (World Wide Web Consortium ) ， 又 称 W3C 理事 会 。 

在 各 大 浏览 器 忙 着 第 一 次 世界 大 战 时 ，W3C 预知 到 DOM 混乱 ， 研 究 各 家 长 短 后 在 1998 
年 10 月 1 日 推出 了 一 个 标准 化 的 DOM Level 1。1999 年 1 月 11 日 ，CSS 1 推荐 也 被 重新 修 
订 ，CSS 2 推荐 发 布 。DOM Level 2 则 在 2000 年 11 月 13 日 发 布 。 

W3C 对 DOM 的 定义 是 : “一 个 与 系统 平台 和 编程 语言 无 关 的 、 中 立 的 应 用 程序 编程 接 
口 (API〉， 人 允许 程序 通过 接口 访问 并 更 改 文档 的 内 容 、 结 构 和 样式 。” 从 此 W3C 为 互联 网 
发 展 道路 制定 并 推广 各 种 标准 。 可 以 去 官网 (http:/www.w3.org/) 上 查阅 所 有 关于 互联 网 相 
关 技 术 及 标准 的 资料 ， 也 包括 JavaScript 的 资料 。 





1.1.4 动态 语言 和 静态 语言 


JavaScript 至 今 仍然 被 称 为 “脚本 语言 ”， 但 正 是 因为 有 了 “ 脚 ”， 浏 览 嚣 才 大 踏步 地 前 
进 着 、 奔 跑 着 、 跳 跃 着 ， 所 以 它 也 是 一 个 让 全 世界 都 充满 活力 的 语言 。 虽 然 C、C++ 构 建 的 
软件 像 高 楼 大 厦 般 宏伟 ， 但 是 它们 也 如 这 些 建筑 一 样 缺乏 足够 的 生机 。 

如 果 说 C、C++ 是 经 典 的 静态 语言 ， 那 么 JavaScript 则 是 动态 语言 的 代表 。 世 界 上 有 静 就 
有 动 ， 并 且 动 和 静 都 是 相对 而 言 的 。 看 到 JavaScript 越 来 越 活跃 ， 在 微软 主导 的 C# 静 态 编程 
语言 中 也 逐渐 可 以 看 到 大 量 的 动态 语言 特性 。 如 果 浏 览 器 可 以 取代 或 部 分 取代 庞大 的 操作 系 
统 ，JavaScript 可 能 正 躲 藏 在 浏览 器 不 为 人 知 的 角落 ， 偷 笑 着 与 自己 越 来 越 像 的 C# 这 类 静态 
语言 。 

世界 上 第 一 门 动态 语言 〈 也 是 世界 上 第 二 门 编程 语言 ) 是 Lisp， 其 后 很 多 语言 都 从 Lisp 
身上 继承 了 必要 的 优势 基因 (比如 Smalltalk、Python、Ruby 等 ) ， 动 态 性 就 是 其 中 之 一 。20 
世纪 70 年 代 ，Smalltalk 语言 出 现 ， 集 合 了 面向 对 象 和 动态 性 ， 获 得 当时 开发 界 的 认可 ; 1986 
年 Perl 出 现 ， 高 效 的 开发 效率 和 极 少 的 语法 限制 赢得 了 大 量程 序 员 的 欢迎 ， 也 使 更 多 人 领教 
了 动态 语言 的 魅力 。 目 前 ， 主 要 的 动态 编程 语言 有 PHP、Visual Basic、Ruby、Python、 
JavaScript、Groovy 和 Perl 等 。 

静态 类 型 语言 的 主要 优点 在 于 其 结构 非常 规范 ， 便 于 调试 ， 类 型 安全 ， 效 率 高 。 动 态 类 
型 语言 的 缺点 是 不 方便 调试 ， 因 为 它 要 运行 起 来 后 才能 发 现 一 些 错误 。 

动态 语言 秉承 的 一 个 理念 是 : 优化 人 的 时 间 ， 而 不 是 机 器 的 时 间 。 提 高 开发 者 的 生产 
力 ， 宁 肯 牺 牲 部 分 的 程序 性 能 或 者 购买 更 高 配置 的 硬件 来 弥补 。 随 着 IT 业 的 不 断 发 展 和 摩尔 


定律 的 作用 ， 硬 件 价值 相对 于 人 的 价值 一 直 在 贬值 ， 这 个 理念 便 符 合 了 现实 的 发 展 规律 。 
最 近 几 年 各 种 语言 的 发 展 趋势 如 图 1-6 所 示 。 读 者 要 明白 JavaScript 这 种 动态 语言 也 不 是 
无 所 不 能 ， 它 有 自己 坚持 的 理由 和 奋斗 的 目标 。 





TIOBE Programming Community Index 
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1-6 动态 语言 和 静态 语言 发 展 趋势 


1.2 配置 JavaScript 开发 环境 


近 几 年 JavaScript 的 开发 工具 也 得 到 了 鞍 勃 发 展 ， 大 小 工具 琳琅 满目 ， 笔 者 结合 自身 经 
验 介 绍 一 些 常用 的 优秀 开发 工具 ， 抛 砖 引 玉 ， 使 读者 对 常用 的 JavaScript 开发 工具 有 所 认 
识 ， 对 于 每 一 款 软件 的 具体 使 用 ， 读 者 朋友 可 到 网 上 去 搜索 、 查 找 ， 由 于 篇 幅 有 限 ， 就 不 包 
括 在 本 书 内 了 。 

大 部 分 读者 应 该 是 在 Windows 平台 下 进行 开发 ， 因 此 本 书 主要 以 Windows 操作 系统 为 
主 来 介绍 各 种 JavaScript 开发 环境 。 


1.2.1 EditPlus 

EditPlus 是 一 个 程序 员 使 用 的 老牌 编程 工具 ， 支 持 很 多 语言 ， 它 是 一 款 由 韩国 Sangil Kim 
(ES-Computing》 出 品 的 小 巧 但 是 功能 强大 的 可 处 理 文本 、HTML 和 程序 语言 的 编辑 器 。 运 
行 效果 如 图 1-7 所 示 ， 图 中 版 本 是 4.3， 网 上 的 版 本 很 丰富 ， 读 者 可 以 根据 实际 情况 去 选择 。 
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图 1-7 EditPlus 运行 界面 
笔者 主推 Edit Plus 的 理由 是 ， 体 积 小 ， 普 及 率 高 ， 上 手 快 ， 可 闪电 般 打 开 10000 行 代码 


的 文件 ， 支 持 多 种 语法 高 亮 ， 当 然 包 括 JavaScript， 提 供 各 种 接口 ， 插 件 简洁 且 丰 富 ， 在 网 络 
中 极 易 找到 ， 是 快速 修改 、 查 阅 JavaScript 代码 的 神 级 利器 。 


1.2.2 Adobe Dreamweaver 
曾经 被 誉 为 “网 页 三 剑客 ”之 一 的 Dreamweaver 备 受 广大 网 页 设计 和 开发 人 员 的 喜爱 ， 
历史 非常 您 入， 运行 效果 如 图 1-8 所 示 。 







































































DW 文件 (P。 坊 坟 (]， 喜 看 (V) 插入 () 修改 M) 格 K(O) 命 S(O。 站 点 (S$) 宣 口 W) 大助 (H) Wi [=lol x 
| 入 | 

最 近 的 项 目 新 建 主要 功能 

chl4ich14-js-form-elements html 归 HIML 全 | C56 新 增 功能 概述 

chldichl4 js form html ColdFusion — 四 

hl4ichl4js-window html 归 PHP 罗江 SR 布局 

projects testjs 到 css 回 上 Business caavsblfF 

nodej 息 虫 indexjs 杰 Javascript 

15015.1html 到 xd ”| SSibamiit 

15115.5html 全 流体 网 格 布局 | 加 | jQuery Mobie 色 板 

151153html 而 Dreamweaver 让 点 

15/offline html 虑 Business Catalyst 站 点 . 区 22 于 

打开 . BD 更 多 . 加 更 多 

块 速 入 门 

OY pe 

i 和 和 教程， 教育 沪 问 hdobe TV yo A 

资产 > 了 Q@|23T 会 | 品 

入 志 报 千 | FTP 记录 | 服务 器 洒 式 | 有 

已 [文件 行 | 指示 Ci Msers\Aaninistrator\D, 

oO 

日 
7 Em 6 
外 =F) 











图 1-8 Adobe Dreamweaver CS6 








CS6 版 本 支持 CSS3、HTML5， 并 集成 了 jQuery 代码 提示 功能 ， 是 网 页 开发 人 员 开 发 大 
型 项 目 或 长 期 使 用 的 必 备 工具 。 











1.2.3 Sublime Text 

Sublime Text 是 JavaScript 集成 开发 环境 IDE 中 比较 漂亮 〈 见 图 1-9) 的 且 对 开发 支持 非 
常 良好 的 一 款 文 本 编辑 器 ， 简 洁 、 强 大 、 高 效 。 

它 处 理 JavaScript 文件 的 效率 的 确 比 不 上 EditPlus， 但 是 做 了 很 多 用 户 体 验方 面 的 改进 和 
支持 ， 对 审美 有 要 求 的 读者 可 果断 入 手 。 
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图 1-9 Sublime Text 3 


1.2.4 JetBrains WebStorm 

JetBrains WebStorm 被 国内 广大 前 端 开发 者 誉 为 “Web 前 端 开 发 神器 ”“ 最 强大 的 
HTMLS5 编辑 器 ”“ 最 智能 的 JavaScript IDE” 等 。 图 1-10 是 其 华丽 的 启动 界面 ， 当 然 它 的 内 
涵 也 相当 丰富 。 














- WebStorm 





图 1-10 WebStorm 2017 启动 界面 


这 个 IDE 打开 之 后 ， 不 仅 可 以 看 到 项 目 结构 ， 还 能 看 到 js 文件 的 代码 结构 ， 如 图 1-11 


所 示 。 





器 
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图 1-11 WebStorm 工作 界面 





强大 是 要 付出 代价 的 。WebStorm 会 消耗 大 量 内 存 ， 














此 某 些 界面 和 Windows 默认 风格 格格 不 入 ， 比 较 怪异 。 


1.2.5 Aptana Studio 


于 自身 是 由 Java 语言 编写 的 ， 因 


Aptana 是 一 个 强大 、 开 源 、JavaScript-focused 的 AJAX 开发 IDE。 它 的 特点 包括 
JavaScript 函数 、HTML 和 CSS 语言 的 代码 提示 功能 。Aptana 安装 简便 ， 基 本 上 按照 提示 


直 单 击 Next 按 钮 ( 见 图 1-12) 即 可 安装 完成 。 


Wacome to Aptana Suudio 3intaler 


Aptana Studio3 








图 1-12 Aptana 安装 界面 
Aptana 在 第 一 次 启动 时 ， 会 弹出 如 图 1-13 所 示 的 对 话 框 ， 让 用 户 选择 一 个 目录 作为 工作 
空间 ， 相 比 WebStorm 那 种 在 每 一 个 目录 下 创建 一 个 临时 文件 的 软件 来 说 ， 这 种 方式 更 容易 让 
人 接受 。 可 直接 单 击 OK 按钮 ， 如 果 不 想 以 后 弹出 此 对 话 框 ， 色 选 图 中 的 复 选 框 就 可 以 了 。 





图 1-13 Aptana 第 一 次 启动 对 话 框 


对 前 端 开发 者 来 说 非常 实用 的 功能 是 ， 它 支持 JavaScript、HTML 和 CSS 的 代码 结构 分 
析 ， 这 一 点 和 WebStorm 差不多 ， 图 1-14 是 在 Aptana 中 打开 一 个 js 文件 的 运行 效果 图 。 
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图 1-14 Aptana 工作 界面 


Aptana 也 是 一 个 吃 内 存 的 大 户 ， 但 是 它 还 还 提供 一 个 非常 不 错 的 MyEclipse 插件 版 本 ， 这 
又 拉 住 了 不 少 程序 员 的 心 ， 但 目前 使 用 这 款 软件 的 用 户 已 经 越 来 越 少 。 


1.3 在 Web 页面 中 使 用 JavaScript 


编写 JavaSeript 代码 其 实 无 须 特殊 软件 ， 一 个 普通 的 文本 编辑 器 和 一 个 Web 浏览 器 就 足 





够 了 。 虽 然 在 1.2 节 中 介绍 了 很 多 JavaScript 文件 编辑 器 ， 读 者 还 是 应 该 根据 实际 应 用 场景 和 
个 人 习惯 选择 适合 的 工具 。 


用 JavaScript 编写 的 代码 需要 放 在 html 文档 中 才能 被 浏览 器 执行 ， 有 两 种 方式 可 以 做 到 


1.3.1 直接 内 骨 JavaScript 代码 


第 一 种 方式 是 将 JavaScript 代码 放 到 文档 <head> 标 签 的 <scrip 忆 标签 中 ， 见 【范例 1-1】。 


【范例 1-1 第 一 个 JavaScript 程 序 hello world】 


下 <!DOCTYPE html> 

2. <html> 

3 <head> 

4 <title>hello world</title> 


5 <script> 

6. alert('hello world!'); 
% </script> 

8 </head> 

9. <body> 

10. </body> 

11. </html> 


将 上 面 的 代码 保存 到 html 文件 中 《在 记事 本 中 编写 ， 然 后 另存 为 扩展 名 为 html 的 文 
件 ) ， 用 任意 浏览 器 打开 ， 就 可 以 看 到 一 个 弹出 对 话 框 。 


1.3.2 引用 JavaScript 文件 


第 二 种 方式 是 把 JavaScript 代码 存 为 一 个 扩展 名 为 js 的 独立 文件 。 以 前 的 做 法 是 在 文档 
<head> 里 用 <script> 标 签 的 src 属性 来 指向 该 文件 ， 见 【范例 1-2】。 


【范例 1-2 引用 JavaScript 文 件 】 


<!DOCTYPE html> 
<html> 
<head> 
<title>hello world</title> 
<script src="helloworld.js"></script> 
</head> 
<body> 
</body> 
</html> 


目前 业界 推荐 的 做 法 是 把 【范例 1-2】 中 的 <scrip 尼 放 到 html 文档 最 后 ，</body> 标 签 之 
前 (第 7 行 和 第 8 行 之 间 ) 。 这 样 做 的 目的 是 ， 使 浏览 器 更 快 地 加 载 页 面 并 展示 给 用 户 ， 从 
而 增强 用 户 体验 。 


OOD 


1.4 高 效率 的 开发 
开发 效率 的 高 低 取决 于 两 大 因素 ， 一 是 自身 ， 二 是 外 在 。 自 身 因素 包括 开发 者 的 多 得 思 


维 能 力 、 对 开发 语言 和 工具 的 熟悉 程度 。 外 在 因素 通常 包括 工具 的 灵活 度 、 代 码 复 用 率 、 语 
法 复杂 度 等 。 


1.4.1 熟悉 语法 
JavaScript 的 语法 非常 灵活 多 变 ， 所 以 很 多 工作 数 年 的 JavaSeript 同行 常常 使 用 的 也 只 是 
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其 中 一 部 分 语法 技巧 。 读 者 不 要 因为 JavaScript 上 手 简单 而 忽略 它 原本 的 语法 体系 ， 只 有 熟 
悉 了 语法 才能 在 大 型 项 目 中 游刃有余 或 是 推陈出新 。 
市 面 上 有 很 多 语法 书籍 ， 本 书 只 对 语法 进行 简单 概括 以 供 参考 查阅 。JavaScript 语法 基本 


@ 区 分 大 小 写 。 

@ 变量 不 区 分 类 型 。 

e@ 每 条 语句 结尾 可 以 省 略 分 号 。 

@ 注释 与 C、C++、Java、PHP 相同。 
ee 代码 段 要 封闭 。 


JavaScript 数据 类 型 有 字符 串 、 数 字 、 布 尔 值 、 数 组 、 对 象 、Null、undefined、NaN。 
JavaScript 中 的 所 有 事物 都 是 对 象 ， 包 括 字 符 串 、 数 值 、 数 组 、 函 数 等 ， 由 数据 类 型 确定 
JavaScript 内 置 的 几 大 对 象 就 是 String、Number、Boolean、Array、Object， 除 此 之 外 还 提供 
了 正则 表达 式 对 象 RegExp、 日 期 对 象 Date、 函 数 对 象 Function、 静 态 数学 对 象 Math。 
e Null 和 undefined 没有 对 应 的 内 置 对 象 ， 只 在 赋值 和 对 比 时 使 用 。 
。 除了 Math 对 象 ， 其 他 内 置 对 象 都 可 以 用 new 关键 字 调 用 。 
e@ 常见 的 window 对 象 和 document 对 象 不 是 JavaScript 内 置 对 象 ， 而 由 浏览 器 BOM 和 
DOM 提供 ， 在 Node.js 等 非 浏览 器 环境 下 是 无 法 调用 的 。 

。 单 双 引 号 都 可 以 用 来 定义 字符 串 对 象 ， 见 【范例 1-3】。 

e 数字 对 象 接受 十 进 制 数 ; 接受 以 0 开头 的 八进制 数 ， 如 023420; 以 0x 开头 的 十 六 进 
制 数 ， 如 0x2710; 还 接受 科学 计数 ， 如 le4， 见 【范例 1-3】。 

e NaN 是 NotaNumber 的 缩写 ， 主 要 用 于 处 理 计 算 中 出 现 的 错误 情况 。 

@ Boolean 对 象 初始 化 值 为 0、-0、null、""、false、undefined、NaN 时 ， 对 象 值 就 是 

false， 反 之 则 为 true。 

e@ [] 可 表示 创建 一 个 新 数组 对 象 Array， 见 【范例 1-3】〗。 

@ 人 可 表示 创建 一 个 新 对 象 Object， 见 【范例 1-3】。 

@ 对 象 通过 中 括号 运算 符 能 够 创建 任意 名 称 的 对 象 成 员 ， 见 【范例 1-3】。 


【范例 1-3 JavaScript 常见 语法 技巧 】 


"<span class="z3f"></span>' == "<span class=\"z3f\"></span>" // 等 于 true 
023420 === 0x2710; // 八 进 制 和 十 六 进 制 ,等 于 true 
023420 === 10000; // 八 进 制 和 十 进 制 ,等 于 true 

234200 ed // 八 进 制 和 科学 计数 ,等 于 true 


var myArray = [] 
var myObject = {} 
var myFunction = function(){}; // 创 建 函 数 
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8 . myFunction.3f = 1; // 会 报错 


9. myObject [myFunction] = 1; // 对 象 成 员 名 称 是 一 个 匿名 函数 
TO "0 567890"10 ==" 0 // 取 整 同时 转 成 数值 型 

11. +new Date() === new Date() .getTime () // 日 期 转 数 值 

12. Math.random() .tostring(16) .substring (2); //14 位 字符 长 度 的 漂亮 随机 码 
13. Math.random() .toString(36) .substring (2); //11 位 字符 长 度 的 漂亮 随机 码 


14. myArray = [1,2,3] 
15. Array.prototype.push.apply (myArray, [4,5,6]); 
// 合 并 数组 后 ，myArray===[1,2,3,4,5,6] 
16. var a=1,b=2; 
17. a= [b, b=a] [0]; //a，Pb 交换 数值 使 a=2，b=1 


更 多 语法 技巧 有 待 读者 自己 去 探索 和 发 现 ， 笔 者 只 是 抛砖引玉 。 


1.4.2 自动 完成 


语法 自动 完成 功能 ， 相 信 读 者 在 使 用 各 种 IDE 工具 时 都 有 所 感受 ， 在 这 里 要 顺便 提示 的 
是 ， 前 面 介绍 的 很 多 JavaScript 开发 IDE 都 有 代码 片段 自动 完成 功能 ， 它 能 一 下 子 完成 一 大 
段 代 码 的 输入 工作 。 以 EditPlus 为 例 ， 在 菜单 栏 单 击 “ 工 具 (T) ”一 “首选 项 (P) ”可 打 
开 如 图 1-15 所 示 的 对 话 框 。 






语法 设置 @) | 语法 阁 色 0) | 


和 | 和 /中 | 于 | 本 站 | 
EE ro 
自动 完成 四 :hinlbsr ee | A 


厂 际 加 到 “Common Files” 厂 关联 到 资源 管理 器 中 
厂 禁用 语法 自动 完成 克 显示 ITIL 工具 栏 
厂 保存 时 删除 行 尾 裤 格 


机 证 XX 取消 届 庙 用 全 了 帮助 如 
图 1-15 EditPlus 首选 项 对 话 框 


在 EditPlus 安装 目录 下 可 以 看 到 acp 结尾 的 文件 ， 它 就 是 自动 完成 规则 文件 。acp 文件 有 
4 个 规则 : 








@ 以 #TITLE 开头 的 表示 声明 ， 如 #TITLE=XHTML 就 表示 是 HTML/XHTML 的 自动 完成 
文件 ， 同 理 也 可 以 自 定义 html 等 文件 的 自动 完成 。 

e 以 #T 开头 的 表示 简写 ， 后面 紧 跟 所 表示 的 全 部 代码 。 

ee 分 号 (;) 代表 注释 。 
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@ ^! 表 示 指 针 位 置 。 
【范例 1-4】 是 一 小 段 XHTML 的 自动 完成 示例 。 


【范例 1-4 EditPlus 自动 完成 acp 文件 规则 片段 】 


#TITLE=XHTML 

EditPlus Auto-completion File v1.0 written by ES-Computing. 
This file is intended to be used by HTML Toolbar of EditPlus. 
<WARNING> 

This file is required for EditPlus to run correctly. 


You can modify only the content of each entry. 
Do not add/remove any entry. 


;? Do not modify title of each entry. 
#CASE=y 

10. #T=B 

1 <b>~1</b> 

12. #T=I 

Lr i 

14. #T=U 

15. <u>^!</u> 

16. #T=H1 

LT < ehl> 

18 . ;中 间 省 略 部 分 

19. #T=H6 

20. <h6>^!</h6> 

21. #T=A 

22. <a href="">^!</a> 

23. #T=IMG 

24. <img src="" width="" height="" alt="^!" /> 


设置 好 后 ， 可 能 需要 重启 EditPlus。 新 建 一 个 html 或 xhtml 文档 ， 在 文件 中 输入 IMG， 
软件 就 自动 转换 为 <img src="" width="" height="" al 人 =""/>。 这 绝对 是 提高 效率 的 最 佳 方式 ， 
次 定义 多 次 使 用 。 

限于 篇 幅 ， 无 法 一 一 列举 所 有 软件 的 自动 完成 功能 ， 读 者 可 上 网 搜寻 。 


ownamnouewN 








1.4.3 使 用 成 熟 框架 和 便捷 工具 

很 多 成 熟 框架 (如 jQuery 和 Ext 等 ) 都 有 悠久 的 历史 ， 代 码 久 经 千 万 网 站 考验 ， 也 符合 
绝 大 多 数 项 目 需求 和 开发 人 员 的 习惯 ， 对 这 些 框 架 的 使 用 是 提高 开发 效率 的 有 效 手 段 。 

本 书 第 17 章 将 详细 介绍 jQuery， 其 他 常见 的 框架 还 有 Ext、Prototype、Yahoo UI、 
Mootools、Dojo、MochiKit、Zepto、Rialto、Spry 等 。 在 这 里 先 给 出 几 个 框架 的 相关 链接 : 


e http://jquery.com 一 一 大 名 易 晶 的 jQuery。 


利器 在 手 ， 编 程 不 愁 ， 笔 者 特 收集 了 一 些 有 用 的 工具 供 读者 平时 使 用 : 





https://www.sencha.com/products/extjs/ Ext 官网 


正则 工具 一 一 http://refiddle.com/。 

正则 表达 式 库 一 一 http://regexlib.com。 

在 线 调试 ( 非 正 可 用 ) 一 一 http://jsfiddle.net/。 

css、js 兼容 性 支持 查询 一 一 http://caniuse.com。 

CSS3 的 loading 一 一 https://icons8.com/cssload/。 

常用 Web 图 标 一 一 https://pfefferle.github.io/openwebicons/。 


检查 网 站 配色 是 否 正确 的 工具 一 一 http://www.checkmycolours.com/。 


相关 参考 


https://www.ultraedit.com/downloads.html 一 一 UltraEdit。 
https://notepad-plus-plus.org/download 一 一 Notepad++。 
https://baike.baidu.com/item/EditPlus 一 一 EditPlus 实用 技巧 。 
https://baike.baidu.com/view/76320.htm 一 一 脚本 语言 百度 百科 。 
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第 2 章 用 JavaScript 验证 表单 


简单 不 先 于 复杂 ， 而 是 在 复杂 之 后 。 
一 一 4lan Perlis， 使 计算 机 科学 成 为 独立 学 科 的 首届 图 灵 奖 得 主 


要 知道 JavaScript 最 初 就 是 为 了 验证 而 生 ， 而 一 个 Web 项 目 开 发 得 不 好 就 会 因 验 证 而 死 。 

JavaScript 的 出 现 主 要 是 为 了 解决 服务 器 端 遗 留 的 速度 问题 ， 为 客户 提供 更 流畅 的 浏览 效 
果 。 当 时 服务 端 需要 对 数据 进行 验证 ， 由 于 网 络 速度 相当 缓慢 ， 只 有 28.8kbps， 客 户 提交 数 
据 等 待 半 天 后 ， 服 务 端 提示 说 : “输入 有 错 !” 这 是 一 件 很 让 人 邦 问 的 事情 。 

由 于 Web 项 目 在 验证 步骤 浪费 的 时 间 越 来 越 多 ， 所 以 需要 JavaScript 这 样 一 个 把 门 的 人 。 

本 章 主要 用 范例 讲解 JavaScript 被 发 明 出 来 主要 做 的 事情 一 一 表单 验证 。 本 章 主要 知识 点 : 


e@ JavaScript 正则 表达 式 
。 表单 元 素 事件 





2.1 最 简单 的 表单 验证 一 一 禁止 空白 的 必 填 项 目 


表单 验证 是 一 个 恒久 话题 ， 但 其 原理 则 相当 简单 〈 见 图 2-1) 。 简 单 的 东西 更 有 生命 
力 ， 用 JavaScript 语 言 专门 制作 的 收费 表单 验证 产品 有 很 多 。 


入 ed 


是 


。 


图 2-1 一 个 表单 验证 的 流程 图 


2.1.1 最 简单 表单 的 HTML 结构 


网 站 最 基础 的 模块 就 是 注册 ， 它 是 一 个 系统 的 交互 基础 。 有 关 其 HTML 结构 ， 请 看 【 范 
例 2-1】。 


【范例 2-1 最 简单 表单 的 HTML 结构 】 


并 <!DOCTYPE html> 

2 <html> 

E， <head> 

4 <title> 最 简单 表单 的 HTML 结构 </title> 

Se </head> 

6. <body> 

<form method="post" action=""> 

8 账户 : <input type="text" name="" /><br /><br /> 

9 密码 : <input type="password" name="" /><br /><br /> 


10. 确认 : <input type="password" name="" /><br /><br /> 
ck <input type="submit" value=" 注 册 "/> 
</form> 


13. </body> 
14. </html> 

【范例 2-1】 中 第 7~12 行 就 是 一 个 注册 表单 的 基本 代码 ， 目 前 我 们 还 做 不 了 任何 有 用 的 
事情 。 比 如 单 击 “ 注 册 ” 按 钮 后 发 布 的 数据 ， 系 统 后 台 是 接收 不 到 的 ， 因 为 input 标签 中 的 
name 没有 指定 任何 参数 ， 这 个 参数 需要 和 系统 后 台 协 商 指定 。 再 看 看 代码 运行 的 效果 ， 如 图 
2-2 所 示 。 





i [ES 
最 简单 表单 的 HT x \ 十 


€ © filey//F/02/2-1ht Cl» 三 














图 2-2 【范例 2-1】Firefox 中 的 运行 效果 
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2.1.2 绑 定 验证 功能 

因为 用 户 最 后 要 去 单 击 “注册 ”按钮 ， 所 以 我 们 就 在 “注册 ”按钮 上 添加 一 个 onclick 寻 
件 属性 ， 引 用 eg.regCheck()， 见 【范例 2-2】。 

【范例 2-2 注册 事件 】 





地 


了 前 面 代码 略 ……- 

二 <input type="submit" value=" 注 册 "onclick="return eg.regCheck();"/> 
3 </form> 

4. <script> 

5. var eg = {};// 声 明 一 个 对 象 ， 当 作 命 名 空间 来 使 用 ， 本 书 默 认 的 范例 都 会 以 此 来 方便 管理 
eg.regCheck = function(){ 

ie 

i } 

9. </script> 

10. </body> 

11. </html> 


当 写 到 【范例 2-2】 时 ， 必 须要 让 eg.regCheck0 函 数 做 些 什么 才 是 。 比 如 要 获取 用 户 输 
入 的 账户 信息 该 怎么 办 ? 这 时 最 好 给 input 标签 加 上 一 个 id 属性 ，JavaScript 再 通过 这 个 指定 
的 id 去 取得 对 应 的 信息 ， 然 后 返回 验证 结果 true 或 false， 见 【范例 2-3】。 


【范例 2-3 给 表单 添加 验证 功能 】 





账户 : <input type="text" name="" id="userid" /><br /><br /> 
3 密码 : <input type="password" name="" id="userpwd" /><br /><br /> 
4 确认 : <input type="password" id="userpwd2" /><br /><br /> 
和 <input type="submit"value=" 注 册 "onclick="return eg.regCheck();"/> 
6 </form> 
js <script> 
8 var eg = {}; 
// 声 明 一 个 对 象 ， 当 作 命 名 空间 来 使 用 ， 本 书 默认 的 范例 都 会 以 此 来 方便 管理 
9, // 定 义 一 个 公共 函数 来 获取 指定 id 元 素 ， 减 少 代码 量 ， 提 高 代码 复 用 率 
10 . eg.$ = function(id){ 
Er return document .getElementById (id) 
2 ] 7 
3 eg.regCheck = function(){ 
14. var uid = eg.$ ("userid"); 
1 var upwd = eg.$ ("userpwd"); 
L668 Var upwd2 = eg.$ ("userpwd2"); 
Ls if(uid.value == ''){ 
18. alert (' 账 户 不 能 为 空 ! ') ; 
19, return false; 
20 } 


33. 


if(upwd.value == ''){ 
alert (' 密 码 不 能 为 空 !') ; 
return false; 
} 
if(upwd.value != upwd2.value){ 
alert (' 两 次 密码 输入 不 相同 !') ; 
return false; 
} 
return true; 
}; 
</script> 
</body> 
</html> 


【范例 2-3】 第 11 行 的 getElementByld 函数 和 onclick 事件 就 是 前 面 1.1.3 小 节 提 到 的 


DHTML 所 提供 的 ， 限 于 篇 幅 ， 更 多 信息 需要 读者 自行 上 网 搜寻 了 解 。 


这 样 我 们 就 为 表单 加 上 了 最 简单 的 验证 功能 。 


2.1.3 绑 定 验证 的 另 一 种 方式 


【范例 2-3】 把 验证 放 在 “注册 ”按钮 的 onclick 事件 属性 里 使 用 ， 同 样 还 有 另 一 种 调用 


方式 ， 即 form 标签 的 onsubmit 事件 属性 ， 功 能 一 样 ， 完 整 代码 见 【范例 2-4】。 
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【范例 2-4 form 表单 绑 定 验证 完整 范例 】 


<!DOCTYPE html> 





<html> 
<head> 
<title> 最 简单 表单 的 HTML 结构 </title> 
</head> 
<body> 
<form method="post" action="" onsubmit="return eg.regCheck();"> 
账户 : <input type="text" name="" id="userid" /><br /><br /> 
密码 : <input type="password" name id="userpwd" /><br /><br /> 
确认 : <input type="password" name="" id="userpwd2" /><br /><br /> 
<input type="submit" value=" 注 册 " /> 
</form> 
<script> 


var eg = {}; 
// 声 明 一 个 对 象 ， 当 作 命名 空间 来 使 用 ， 本 书 默认 的 范例 都 会 以 此 来 方便 管理 
// 定 义 一 个 公共 函数 来 获取 指定 id 元 素 的 值 ， 减 少 代码 量 ， 提 高 代码 复 用 率 
eg.$ = function(id){ 

return document .getElementById (id) 
] 7 
eg.regCheck = function(){ 
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vaScript 实 上 JavaScript、jQuery、HTML 


20. var uid = eg.$ ("userid"); 


2 var upwd = eg.$ ("userpwd"); 

2 var upwd2 = eg.$ ("userpwd2"); 

2 if(uid.value == "'"){ 

2 alert (' 账 户 不 能 为 空 !') ; 

255 return false;  // 返 回 false 就 会 阻止 表单 form 提交 
县 全 } 

2 if(upwd.value == "'){ 

28. alert (' 密 码 不 能 为 空 ! ') ; 

lo return false; // 返 回 false 就 会 阻止 表单 form 提交 
Os 》 

BE if(upwd.value != upwd2.value){ 

3 alert (' 两 次 密码 输入 不 相同 !') ; 

33 return false; // 返 回 false 就 会 阻止 表单 form 提交 
34. } 

355 return true; // 返 回 true 就 会 提交 表单 form 

36. }; 

3 </script> 

38. </body> 

39. </html> 


【范例 2-4】 和 【范例 2-3】 类 似 ， 只 是 调用 的 地 方 不 同 ， 所 谓 条 条 大 路 通 罗马 ， 有 很 多 
算法 都 可 以 达到 相同 的 目的 ， 只 是 根据 情况 而 定 ， 两 个 范例 的 运行 效果 都 一 样 ， 见 图 2-3。 
S el 
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图 2-3 【范例 2-3】 和 【范例 24】 的 运行 效果 


前 面 的 范例 都 是 把 JavaScript 和 HTML 代码 写 在 一 起 ， 也 可 以 将 js 代码 直接 保存 为 html 
格式 或 htm 格式 的 文件 让 浏览 器 来 运行 。HTML 文档 最 常用 的 扩展 名 是 html， 而 扩展 名 htm 
是 因为 像 DOS 这 样 的 旧 操作 系统 限制 扩展 名 为 最 多 3 个 字符 ， 所 以 也 允许 使 用 htm 扩展 名 。 
现在 htm 扩展 名 使 用 得 比较 少 ， 但 是 仍旧 受到 支持 。 

从 本 章 的 范例 可 以 看 出 ， 笔 者 使 用 了 eg 这 样 的 全 局 对 象 变量 来 存储 自 定义 的 各 种 方法 。 
这 称 为 “ 单 全 局 变量 ”一 一 这 样 做 的 目的 是 减少 “环境 污染 ”， 正 所 谓 环保 无 处 不 在 ， 环 保 
的 好 处 在 于 不 同人 编写 的 代码 、 不 同 项 目的 代码 都 可 以 放心 大 胆 地 使 用 ， 而 不 用 担心 冲突 ， 
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另外 就 是 利于 维护 ， 看 看 图 2-4 就 能 明白 。 使 用 单 全 局 变量 的 著名 范例 有 jQuery 库 、YUI 工 
具 等 。 
比 单一 更 少 的 是 零 全 局 变量 ， 这 是 一 个 极端 特例 ， 如 果 脚 本 短小 ， 且 不 需要 对 外 提供 交 
互 接口 时 就 可 以 这 样 做 ， 但 一 般 都 要 提供 至 少 一 个 以 上 的 交互 接口 。 








window 


Ajaxpost 
CancelCommentEdit 
CancelCommentsubscribe 
Commenthotify 
Delcomment 
Digglt 
GetCommentBody 










控制 台 HI 了 LL CSS 牌 本 DOE ~ 








图 2-4 全 局 变量 污染 对 比 


2.2 处 理 各 种 类 型 的 表单 元 素 


表单 (Form) 是 在 HTML1.0 草案 时 代 就 被 支持 的 古老 概念 ， 因 为 HTML 没有 1.0 版 ， 


所 以 表单 元 素 最 早 在 HTML2.0 中 被 规范 ， 这 么 古老 的 对 象 至 今 依然 被 广泛 使 用 ， 这 就 证 明 
其 意义 所 在 。 


2.2.1 input、textarea、hidden 和 button 


段 ， 


4】 增 加 的 代码 如 【范例 2-5】 所 示 。 


心 w_ N 


随 着 网 站 的 发 展 ， 需 求 会 不 断 发 生变 化 ， 比 如 要 在 【范例 2-4】 基 础 上 增加 “简介 ” 字 


可 以 为 空 ， 但 是 最 长 不 超过 60 个 字符 ， 同 时 要 统计 一 下 ， 用 户 输入 错误 的 次 数 ， 输 入 超 
过 3 次 ， 就 锁定 “注册 ”按钮 ， 然 后 要 “解锁 ”才能 重新 使 用 ， 根 据 业 务 需求 基于 【范例 2- 


【范例 2-5 处 理 各 种 类 型 的 表单 一 】 


<!DOCTYPE html> 
<html> 


<head> 


<title> 处 理 各 种 类 型 的 表单 一 </title> 
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5 </head> 

6. <body> 

Ch <form method="post" action="" onsubmit="return eg.regCheck();"> 

8 <input type="hidden" name="" i errnum" value="0"/> 

9 账户 : <input type="text" name="" id="userid" /><br /><br /> 

0 密码 ; <input type="password" name="" id="userpwd" /><br /><br /> 

Th 确认 : <input type="password" name="" id="userpwd2" /><br /><br /> 

ii 二 简介 : <textarea name="" rows="4" cols="18" id="about"></textarea> 

<br /><br /> 

3 <input type="submit" value=" 注 册 " id="regBtn" /> <input type= 
"button" value=" 解 锁 " onclick="eg.unlock()" style="display:none;" 
id="regUnlock" /> 

14. </form> 

5 <script> 

EG var eg = {}; 
// 声 明 一 个 对 象 ， 当 作 命 名 空间 来 使 用 ， 本 书 默 认 的 范例 都 会 以 此 来 方便 管理 

人 // 定 义 一 个 公共 函数 来 获取 指定 id 元 素 ， 减 少 代码 量 ， 提 高 代码 复 用 率 

LD eg.$ = function(id){ 

9 return document .getElementById(id); 

a0 }; 

2 // 主 要 的 验证 方法 

224 eg.regCheck = function(){ 

D9 var uid = eg.$ ("userid"); 

24. Var upwd = eg.$ ("userpwd"); 

Ds Var upwd2 = eg.$ ("userpwd2"); 

265 if(uid.value == ''"){//value 是 元 素 自 带 属 性 

Elin alert (' 账 户 不 能 为 空 !') ; 

28. eg.err(); 

29。 return false; 

30. } 

31e if(upwd.value == "''){ 

325 alert ( "密码 不 能 为 空 ! ') ; 

935 eg.err(); 

345 return false; 

35 } 

365 if(upwd.value != upwd2.value){ 

S78 alert (" 两 次 密码 输入 不 相同 !" ) ; 

38-。 eg.err(); 

39。 return false; 

40. } 

A // 新 增 的 部 分 

42. var about = eg.$ ("about"); 

43. if (about .value.length>60) { //value 是 字符 串 类 型 的 属性 

44. alert (' 简 介 太 长 !'); 

45. eg.err(); 
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68 . 


69. 
0 
了 下。 
72. </html> 


从 【范例 2-5】 的 代码 可 看 出 ， 以 前 直接 提示 错误 信息 就 行 了 ， 现 在 还 要 做 错误 统计 ， 


return false; 
} 
return true; // 返 回 true 就 会 提交 表单 form 
] 7 
// 出 错时 记录 错误 次 数 
eg.err = function(){ 
Var el = eg.$ ("errnum"); 
var old = el.value; 
el.value = parseInt (ol1d)+1; 
// 把 字符 串 转换 为 整数 +1， 并 保存 起 来 
eg.lock(); // 用 来 检查 是 否 应 该 锁定 
] 7 
// 通 过 次 数 判断 是 否 要 锁定 注册 
eg.lock = function(){ 
Var err = eg.$ ("errnum"); 
if(parseInt (err.value)>2){ 
eg.$ ("regBtn") .disabled = true; 
// 根 据 业 务 需 求 ， 输 错 3 次 就 锁定 
eg.$ ("regUnlock") .style.display="block"; 
// 同 时 显示 解锁 按钮 


] 7 

// 解 锁 

eg.unlock = function(){ 
eg.$ ("regBtn") .disabled = false; 
// 根 据 业 务 需 求 ， 解 锁 就 是 让 用 户 可 以 重新 注册 
eg.$("regUnlock") .style.display="none"; 
// 元 素 所 有 样式 都 挂 载 到 style 属性 下 

} 


</script> 


这 些 统计 数据 非常 有 用 ， 可 以 为 后 台 系 统 保存 起 来 用 于 分 析 用 户 的 错误 率 ， 甚 至 可 以 分 析出 
用 户 一 般 会 在 哪些 字段 上 出 错 。 记 录 错 误 信息 的 数据 不 需要 给 用 户 看 到 ， 可 以 选择 input 的 
type 属性 是 hidden 的 元 素来 存储 。 用 户 第 3 次 注册 出 错时 的 界面 如 图 2-5 所 示 。 
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账户 : 





"x | 
ses x | 


€ © fiey///F/02/2-5htn c Bal 














2-5 【范例 2-5】 用 户 第 3 次 注册 失败 的 效果 图 


2.2.2 checkbox、radio 和 select 


永远 别 期 待 自己 写 的 代码 会 运行 很 入 ， 就 算 没 有 bug， 需 求 也 总 是 在 变化 的 。 

例如 ， 有 人 告诉 你 【范例 2-5】 收 集 的 信息 太 少 了 ， 需 要 知道 用 户 “ 性 别 ”， 还 需要 知 
道 用 户 “年 龄 ” 段 ， 然 后 还 要 选择 兴趣 爱好 ， 最 好 是 让 用 户 必 须 选择 一 个 。 这 些 需求 都 必须 
实现 ， 最 终 的 代码 见 【 范 例 2-6】。 


【范例 2-6 处 理 各 种 类 型 的 表单 二 】 


1。 <!DOCTYPE htm1> 

2. <html> 

3。 <head> 

4. <title> 处 理 各 种 类 型 的 表单 二 </title> 

5. </head> 

Ge <body> 

hs <form method="POST" onSubmit="return eg.regCheck();"> 

8. <input type="hidden" name="" id="errnum" value="0"/> 

9. 账户 : <input type="text" name="" id="userid" /><br /><br /> 

10. 密码 : <input type="password" name="" id="userpwd" /><br /><br /> 

1 确认 : <input type="password" name="" id="userpwd2" /><br /><br /> 

2 性 别 : <input type="radio" name="sex" value="1" checked="checked"/> 
男 <input type="radio" name="sex" value="0"/> 女 <br /><br /> 

3 年 龄 : <select name="" id="age"> 

4 <option value="0" selected="selected"> 请 选择 年 龄 段 </option> 

请 <option value="1">18 岁 以 下 </option> 

6 <option value="2">18-24 岁 </option> 

7 <option value="3">24-30 岁 </option> 

8 <option value="4">30-35 岁 </option> 

19. <option value="5">35 岁 以 上 </option> 
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205 </select><br/><br/> 

2 爱好 : <input type="checkbox" name="like" value: 
上 网 <input type="checkbox" name="like" value class="like"/> 
和 逛街 <input type="checkbox" name="like" value="3" class="like"/> 
看 电影 <input type="checkbox" name="like" value="4"class="1ike"/> 
其 他 <br/><br/> 







" class="like"/> 





22。 简介 : <textarea name="" rows="4" cols="18" id="about"></textarea> 
<br/><br/> 
2 <input type="submit" value=" 注 册 " id="regBtn" /> <input type= 


"button" value=" 解 锁 ” onclick="eg.unlock()" style="display:none;" 
id="regUnlock" /> 


2 </form> 
并 <script> 
2 var eg = {}; 
// 声 明 一 个 对 象 ， 当 作 命 名 空间 来 使 用 ， 本 书 默 认 的 范例 都 会 以 此 来 方便 管理 
Za // 定 义 一 个 公共 函数 来 获取 指定 id 元 素 ， 减 少 代码 量 ， 提 高 代码 复 用 率 
pe eg.$ = function(id){ 
295 return document .getElementById (id) 
30° }; 
3 // 主 要 的 验证 方法 
32% eg.regCheck = function(){ 
33。 var uid = eg.$ ("userid"); 
34. Var upwd = eg.$ ("userpwd"); 
3 Var upwd2 = eg.$ ("userpwd2"); 
368 if(uid.value == ''){ 
37e alert (' 账 户 不 能 为 空 ! ') ; 
38. eg.err(); 
3 return false; 
40. } 
41. if(upwd.value == "''){ 
42. alert (' 密 码 不 能 为 空 ! ') ; 
3 eg.err(); 
44. return false; 
45. } 
46. if(upwd.value != upwd2.value){ 
47. alert (" 两 次 密码 输入 不 相同 !" ) ; 
48. eg.err(); 
495 return false; 
50。 } 
Sm // 新 增 的 部 分 
本 2 Var about = eg.$ ("about"); 
3 if(about.value.length>60){ 
S28 alert (' 简 介 太 长 !'); 
S58 eg.err(); 
56. return false; 
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81. 
82. 
83. 
84. 


85。 
86. 
87. 
88 . 
89. 
90. 
Sls 


92. 


93% 
94, 
95. 
96. 
97. 
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} 
// 第 二 次 新 增 的 部 分 
var age = eg.$ ("age"); // 下 拉 选 项 框 
if(age.value == "0"){ 
alert (" 请 选择 年 龄 段 ! ') ; 
eg.err(); 
return false; 


var likes = document .getElementsByClassName ("like"); 


var likeNum = 0; 
for (var n=0;n<likes.length;n++){ 
if(likes[n] .checked){ 
likeNum++; 


} 
if (likeNum==0){ 
alert (' 请 至 少 选择 一 个 爱好 !') ; 
eg.err(); 
return false; 
} 
return true; 
// 返 回 true 就 会 提交 表单 form 
] 7 
// 出 错时 记录 错误 次 数 
eg.err = function(){ 
var el = eg.$ ("errnum"); 
var old = el.value; 
el.value = parseInt (old)+17 


// 把 字符 串 转换 为 整数 +1， 并 保存 起 来 


eg.lock(); // 用 来 检查 是 否 应 该 锁定 


] 7 
// 通 过 次 数 判断 是 否 要 锁定 注册 
eg.lock = function(){ 
var err = eg.$ ("errnum"); 
if(ParseInt (err.value)>2){ 
eg.$ ("regBtn") .disabled = true; 
// 根 据 业 务 需 求 ， 输 错 3 次 就 锁定 
eg.$ ("regUnlock") .style.display="block"; 
// 同 时 显示 解锁 按钮 


}; 
// 解 锁 
eg.unlock = function(){ 
eg.$ ("regBtn") .disabled = false; 


// 根 据 业 务 需求 ， 解 锁 就 是 让 用 户 可 以 重新 注册 


98 . eg.$("regUnlock") .style.display="none"; 
99。 } 
100. </script> 


101. </body> 
102. </html> 


最 让 人 痛苦 的 事情 是 好 不 容易 写 好 代码 ， 用 
Firefox 调试 一 切 正常 ， 提 交 测试 部 门 进行 测试 。 这 代 EE 


A 后 生 和 ， 芝 可 民 示 上 信息， 





码 怎么 不 兼容 下 6、IE7 呢 ? a 
看 看 在 IE 6 下 到 底 是 怎么 回 事 呢 ?图 2-6 不 容易 Cm | epiaw 





看 到 ， 在 运行 时 它 会 一 闪 而 过 ， 也 无 任何 提示 ， 这 也 
是 未 达到 预期 验证 效果 的 原因 。 

在 正 6 下 document 不 支持 getElementsByClassName 
方法 ， 怎 么 办 呢 ? 那 就 得 写 一 套 兼 容 的 代码 放 到 [esx es 
eg.regCheck 方法 前 ， 见 【范例 2-7】。 i 








图 2-6 IE 6 下 报错 信息 
【范例 2-7 兼容 各 浏览 器 的 获取 指定 class 名 称 元 素 集合 的 方法 】 


Te // 定 义 一 个 公共 函数 来 获取 指定 class 名 称 的 元 素 集合 ， 能 兼容 各 个 浏览 器 
2 eg.getElementsByClassName = function(className, element) { 
5 if(document .getElementsByClassName) { // 如 果 浏 览 器 支持 ， 直 接 返 回 
4. return (element | |document) .getElementsByClassName (className); 
5 下 
6. Var children = (element || document) .getElementsByTagName ('*'); 
// 使 用 通配符 
了 Var elements = new Rrray() 
8. 
Qs for (var i = 0; i < children.length; i++) { 
0 var child = children[i]; 
da var classNames = child.className.split(' '); 
/ /分割 多 个 class 样式 
2 for (var j] = 0; j < classNames.length; j++) { 
区 if (classNames[j] == className) { 
汪汪 elements.push (child); 
5 break; 
16。 有 
} 
85 } 
19% return elements; 
205 ] 7 


29 


【范例 2-6】 原 66 行 也 要 改 为 : 
var likes = eg.getElementsByClassName ("like"); 


再 次 运行 后 ， 终 于 在 下 6 中 得 到 了 预期 的 验证 效果 ， 如 图 2-7 所 示 。 









文件 中 策 柱 四。 查看 


= 
Qa:©O- "I D1 Pe 时 


MD em ee ew \ 硕 面 \ 【J5 书 ] \02\forahtnl 了 固 科 到 le 














爱好 ， 丰 上 网 乒 逛 街 三 看 电影 三 其 他 











简介 ， 
BE 三 三 三 厂 三 全 疡 师 





习 2-7 预期 的 验证 效果 


兼容 性 是 令 人 头疼 的 历史 遗留 问题 ， 因 此 jQuery 这 类 框架 才 会 应 运 而 生 ，jQuery 相关 信 
息 可 以 参看 第 四 篇 中 的 内 容 ，jQuery 从 2 版 本 开始 也 放弃 了 对 IE 6 的 兼容 问题 ， 因 为 目前 已 
经 很 少 有 人 再 使 用 IE 6， 所 以 本 书后 面 也 会 更 少 提 及 这 类 兼容 问题 。 


2.3 用 正则 来 校 验 复杂 的 格式 要 求 


在 职场 里 流行 一 句 话 : 用 户 总 是 对 的 ， 老 板 也 是 对 的 。 

前 面 的 代码 运行 没 多 久 ， 老 板 就 提出 : 加 上 电子 邮件 吧 ! 于 是 我 们 就 得 接触 已 有 40 多 岁 
的 大 妹子 一 一 “ 伊 妹 儿 ” 了 ， 当 然 大 多 数 时 候 和 “ 伊 妹 儿 ” 打 交道 的 也 是 有 50 多 岁 的 正则 老 
大 哥 。 


2.3.1 认识 JavaScript 正则 


正则 ， 也 称 正则 表达 式 ， 也 叫 正 则 表示 法 。 最 早 见 于 1956 年 斯 蒂 芬 。 科 尔 。 克 莱 尼 
(Stephen Cole Kleene) 发表 的 论文 《神经 网 事件 的 表示 法 》。 该 论文 利用 称 为 正则 集合 的 数 
学 符号 描述 神经 网 事件 模型 ， 而 且 他 的 递归 论 研究 葛 定 了 理论 计算 机 科学 的 基础 ， 他 也 被 称 
为 正则 表达 式 之 父 

之 后 一 段 时 间 ，UNIX 之 父 肯 。 汤 普 逊 (Kenneth Lane Thompson) 将 其 引入 UNIX 编辑 
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器 中 ， 自 此 以 后 ， 正 则 表达 式 被 广泛 地 应 用 到 各 种 UNIX 或 类 似 于 UNIX 的 工具 中 ， 如 大 家 
熟知 的 Perl。 
如 今 ， 只 要 是 计算 机 编程 语言 就 必然 会 有 正则 表达 式 的 身影 。 





正则 确实 是 公认 的 难 学 但 非常 有 用 的 工具 。 著 名 的 NoSQL 数据 库 MongoDB 不 是 靠 SQL 


语句 来 搜索 数据 而 是 用 正则 来 搜索 ， 这 正 说 明 其 价值 。 





2.3.2 JavaScript 正则 符号 及 其 说 明 
因为 其 强大 而 复杂 ， 市 面 上 也 有 很 多 专门 介绍 正则 的 书籍 ， 读 者 可 根据 自己 情况 去 选择 


\ 


符号 简要 说 明 


阅读 ， 也 可 以 上 网 自行 搜索 资料 。 表 2-1 列 出 了 常见 的 正则 表达 式 符 号 并 简要 说 明了 其 用 
法 ， 以 备查 阅 。 


表 2-1 正则 表达 式 常见 符号 及 说 明 


将 下 一 个 字符 标记 为 一 个 特殊 字符 、 一 个 原 义 字符 、 一 个 向 后 引用 或 一 个 八进制 转 义 符 。 例 
如 ，n' 匹 配 字符 "n"， 匹 配 一 个 换行 符 ， 序 列 兴 匹配 "\" 而 \(" 则 匹配 "(" 


匹配 输入 字符 串 的 开始 位 置 。 如 果 设 置 了 RegExp 对 象 的 Multiline 属性 ，^ 也 匹配 或 \r 之 
后 的 位 置 

匹配 输入 字符 串 的 结束 位 置 。 如 果 设置 了 RegExp 对 象 的 Multiline 属性 ，$ 也 匹配 Mn' 或 r 之 前 
的 位 置 

匹配 前 面 的 子 表 达 式 零 次 或 多 次 。 例 如 ，zo* 能 匹配 "z" 以 及 "zoo"。* 等 价 于 {0,} 

匹配 前 面 的 子 表达 式 一 次 或 多 次 。 例 如 ，'zot' 能 匹配 "zo" 以 及 "zoo"， 但 不 能 匹配 "z"。+ 等 价 
Fs 

匹配 前 面 的 子 表达 式 零 次 或 一 次 。 例 如 ，"do(es)?" 可 以 匹配 "do" 或 "does" 中 的 "do"。? 等 价 于 
{0,1} 

n 是 一 个 非 负 整 数 。 匹 配 确定 的 n 次 。 例 如 ，'o{2}' 不 能 匹配 "Bob" 中 的 'o"， 但 是 能 匹配 "food" 
中 的 两 个 o 

















n 是 一 个 非 负 整 数 ， 至 少 匹 配 n 次 。 例 如 ，'o{2,}' 不 能 匹配 "Bob" 中 的 '0"， 但 能 匹配 "foooood" 中 
的 所 有 0。'o{1,}' 等 价 于 'o+，'0{0,}' 则 等 价 于 'o*" 

m 和 n 均 为 非 负 整 数 ， 其 中 n < m。 最 少 匹 配 n 次 且 最 多 匹配 m 次 。 例 如 ，"o{13}" 将 匹配 
"fooooood" 中 的 前 三 个 o。'o{0,1}' 等 价 于 '"o?。 请 注意 逗号 和 两 个 数 之 间 不 能 有 空格 

当 该 字符 紧 跟 在 任何 一 个 其 他 限制 符 (*, +,?, {n}, fn,}, {n,m}) 后 面 时 ， 匹 配 模 式 是 非 人 岛 禁 的 。 
非 贪 禁 模式 尽 可 能 少 地 匹配 所 搜索 的 字符 串 ， 而 默认 的 贪 禁 模式 则 尽 可 能 多 地 匹配 所 搜索 的 
字符 串 。 例 如 ， 对 于 字符 串 "oooo"，'of+? 将 匹配 单个 "o"， 而 'o+ 将 匹配 所 有 'o' 








匹配 除 "m" 之 外 的 任何 单个 字符 。 要 匹配 包括 "nm' 在 内 的 任何 字符 ， 请 使 用 像 [.\n]' 的 模式 





(pattern) 








匹配 pattem 并 获取 这 一 匹配 。 所 获取 的 匹配 可 以 从 产生 的 Matches 集合 得 到 ， 在 VBScript 中 使 用 
SubMatches 集合 ， 在 JScript 中 则 使 用 $0..….$9 属性 。 要 匹配 圆 括号 字符 ， 请 使 用 (或 小 
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( 续 表 ) 





符号 


简要 说 明 





(?:pattern) 


匹配 pattern 但 不 获取 匹配 结果 ， 也 就 是 说 这 是 一 个 非 获取 匹配 ， 不 进行 存储 供 以 后 使 用 。 
这 在 使 用 "或 " 字符 (|) 来 组 合 一 个 模式 的 各 个 部 分 时 很 有 用 。 例 如 ，'industr(?:ylies) 就 是 一 个 
比 'industrylindustries' 更 简略 的 表达 式 





(2=patterm) 


正 向 预 查 ， 在 任何 匹配 pattern 的 字符 串 开始 处 匹配 查找 字符 串 。 这 是 一 个 非 获 取 匹 配 ， 也 
就 是 说 ， 该 匹配 不 需要 获取 供 以 后 使 用 。 例 如 ，"Windows (?=95|98INTI2003) 能 匹配 
"Windows 2003" 中 的 "Windows"， 但 不 能 匹配 "Windows 7" 中 的 "Windows"。 预 查 不 消耗 字 
符 ， 也 就 是 说 ， 在 一 个 匹配 发 生 后 ， 在 最 后 一 次 匹配 之 后 立即 开始 下 一 次 匹配 的 搜索 ， 而 
不 是 从 包含 预 查 的 字符 之 后 开始 








(?!pattern) 


负 向 预 查 ， 在 任何 不 匹配 pattern 的 字符 串 开始 处 匹配 查找 字符 串 。 这 是 一 个 非 获取 匹配 ， 
也 就 是 说 ， 该 匹配 不 需要 获取 供 以 后 使 用 。 例 如 'Windows (2!95l98INTI2003) 能 匹配 
"Windows 7" 中 的 "Windows"， 但 不 能 匹配 "Windows 2003" 中 的 "Windows"。 预 查 不 消耗 字 
符 ， 也 就 是 说 ， 在 一 个 匹配 发 生 后， 在 最 后 一 次 匹配 之 后 立即 开始 下 一 次 匹配 的 搜索 ， 而 
不 是 从 包含 预 查 的 字符 之 后 开始 


匹配 x 或 y。 例 如 ，'zfood' 能 匹配 "z" 或 "food"。'zlDood 则 匹配 "zood" 或 "food" 

字符 集合 。 匹 配 所 包含 的 任意 一 个 字符 。 例 如 ，'[abc] 可 以 匹配 "plain" 中 的 'a' 

负 值 字符 集合 。 匹 配 未 包含 的 任意 字符 。 例 如 ，'[^abc] 可 以 匹配 "plain" 中 的 'p' 

字符 范围 。 匹 配 指定 范围 内 的 任意 字符 。 例 如 ，'[a- 可 ' 可 以 匹配 'a' 到 'z' 范 围 内 的 任意 小 写字 
母 字符 

负 值 字符 范围 。 匹 配 任何 不 在 指定 范围 内 的 任意 字符 。 例 如 ，'[^a-zJ' 可 以 匹配 任何 不 在 'a' 到 
%z' 范 围 内 的 任意 字符 

匹配 一 个 单词 边界 ， 也 就 是 指 单词 和 空格 间 的 位 置 。 例 如 ，'erb' 可 以 匹配 "never" 中 的 'er， 
但 不 能 匹配 "verb" 中 的 'er 

匹配 非 单词 边界 。'er\B' 能 匹配 "verb" 中 的 'er， 但 不 能 匹配 "never" 中 的 'er 


匹配 由 x 指明 的 控制 字符 。 例 如 ，\eM 匹配 一 个 Control-M 或 回 车 符 。x 的 值 必须 为 A~Z 或 
a~z 之 一 ， 否 则 ， 将 c 视 为 一 个 原 义 的 'c' 字 符 




















匹配 一 个 数字 字符 。 等 价 于 [0-9] 





匹配 一 个 非 数 字 字 符 。 等 价 于 [^0-9] 





匹配 一 个 换 页 符 。 等 价 于 \x0c 和 \cL 





匹配 一 个 换行 符 。 等 价 于 \x0a 和 \cJ 





匹配 一 个 回 车 符 。 等 价 于 \x0d 和 \cM 





匹配 任何 空白 字符 ， 包 括 空格 、 制 表 符 、 换 页 符 等 ， 等 价 于 [ \fn\n\tv] 





匹配 任何 非 空白 字符 。 等 价 于 [^ ftv] 
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匹配 一 个 制 表 符 。 等 价 于 \x09 和 \cI 





( 续 表 ) 





简要 说 明 





匹配 一 个 垂直 制 表 符 。 等 价 于 \x0b 和 \cK 





匹配 包括 下 划 线 的 任何 单词 字符 。 等 价 于 '[A-Za-z0-9 J 
匹配 任何 非 单词 字符 。 等 价 于 '[^A-Za-z0-9 了 


匹配 n， 其 中 n 为 十 六 进 制 转 义 值 。 十 六 进 制 转 义 值 必须 为 确定 的 两 个 数字 长 。 例 如 ， 
Mx41' 匹配 "A"。N\x041' 则 等 价 于 "x04' & "1"。 正 则 表达 式 中 可 以 使 用 ASCII 编码 





匹配 num， 其 中 num 是 一 个 正 整数 ， 是 对 所 获取 的 匹配 的 引用 。 例 如 ，'(.N1 匹配 两 个 连续 
的 相同 字符 











标识 一 个 八进制 转 义 值 或 一 个 向 后 引用 。 如 果 之 前 至 少 有 n 个 获取 的 子 表达 式 ， 则 n 为 
向 后 引用 。 如 果 n 为 八进制 数字 (0~7) ， 则 n 为 一 个 八进制 转 义 值 

标识 一 个 八进制 转 义 值 或 一 个 向 后 引用 。 如 果 \nm 之 前 至 少 有 nm 个 获得 子 表达 式 ， 则 nm 
为 向 后 引用 。 如 果 \nm 之 前 至 少 有 n 个 获取 ， 则 n 为 一 个 后 跟 文字 m 的 向 后 引用 。 如 果 前 
面 的 条 件 都 不 满足 ， 若 n 和 症 均 为 八进制 数字 (0~7) ， 则 \nm 将 匹配 八进制 转 义 值 am 
如 果 n 为 八进制 数字 〈0-3) ， 且 m 和 1 均 为 八进制 数字 〈0~7) ， 则 匹配 八进制 转 义 值 
nml 

匹配 n， 其 中 n 是 一 个 用 4 个 十 六 进 制 数字 表示 的 Unicode 字符 。 例 如 ，\u00A9 匹配 版 权 
符号 (?) 








2.3.3 正则 验证 输入 邮箱 
在 【范例 2-6】 的 22 行 后 面 增 加 如 下 代码 让 用 户 输入 邮箱 : 


邮箱 : <input type="text" name="" id="email" /><br /><br /> 


在 【范例 2-6】 的 78 行 “return true; ”前 增加 如 下 代码 来 验证 邮箱 : 
// 邮 箱 验证 


Var email = eg.$ ("email"); 
if(!/^[A-Za-z\d]+[A-Za-z\d\- \.]*@([A-Za-z\d]+[A-2a-z\d\-]*\.)+[A-2a-z] 


} 


{2,4}$/.test (email.value)){ 
alert (' 请 输入 正确 的 邮箱 !') ; 
eg.err(); 
return false; 


上 面 的 站 判断 中 用 了 符号 方式 来 声明 RegExp 正则 对 象 ， 如 果 要 换 成 下 面 这 样 也 是 可 以 的 : 


if(!new RegExp("^[a-z\\d]+[\\w\\-\.]*@([a-z\\dl+[a-z\\d\\-]*\.)+[a-z] {2,4} 


$","i") .test (email.value)){ 
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可 以 看 到 少 了 A~Z 这 样 的 字符 ，"\" 是 转 义 "\" 的 意思 ， 同 时 RegExp 多 传递 了 一 个 参数 
i， 意 思 是 忽略 字母 的 大 小 写 。 

简要 解释 一 下 这 个 正则 表达 的 意思 : 

® 人 ^[A-Za-z\d]+ 和 ^[a-zNd]+ 是 以 字母 或 数字 开头 。 

® [A-Za-z\d\- \]* 和 [\NwN\]* 是 允许 字母 、 数 字 、 下 划 线 、 中 横 线 和 点 出 现 0 次 以 上 。 
([A-Za-zd]+[A-Za-Ad\-]*\.+ 和 ([a-z\d]+[a-A\d\W-]A\.)+ 是 以 字母 开头 接着 只 允许 字母 、 数 
字 、 中 横 线 和 点 为 一 组 ， 可 以 出 现 1 次 以 上 ， 即 匹配 域名 163.com 中 的 163. 这 部 分 。 
® [A-Za-z]{2,4}$ 和 [A-Za-z]{2,4}$ 是 以 字母 结尾 长 度 为 2~4 个 字母 。 


2.4 改善 用 户 体验 


相信 前 面 的 例子 是 不 会 被 真正 投入 使 用 的 ， 因 为 第 一 眼看 上 去 它 真 的 很 丑陋 ， 感 觉 像 个 
未 完成 品 。 如 果真 的 有 投入 使 用 的 项 目 ， 那 可 能 是 HTML2.0 时 代 ， 在 现在 这 个 讲究 用 户 体 
验 的 社会 里 会 被 视 为 异类 。 


2.4.1 什么 是 用 户 体验 


用 户 体验 〈User Experience，UE) 是 用 户 使 用 产品 过 程 中 建立 起 来 的 纯 主观 感受 。 虽 然 
是 主观 感受 ， 对 于 特定 人 群 可 以 通过 实验 测定 。 
在 计算 机 领域 ， 对 此 已 有 标准 ， 那 就 是 人 机 设计 国际 标准 ISO 9241-210:2010， 该 标准 将 用 
户 体验 定义 为 : “人 们 对 于 针对 使 用 或 期 望 使 用 的 产品 、 系 统 或 者 服务 的 认 知 印象 和 回应 。” 
该 定义 说 明了 用 户 在 使 用 一 个 产品 或 系统 之 前 、 使 用 期 间 和 使 用 之 后 的 全 部 感受 ， 包 括 
情感 、 信 仰 、 喜 好 、 认 知 印象 、 生 理 和 心理 反应 、 行 为 和 成 就 等 各 个 方面 。 
影响 用 户 体验 的 因素 有 系统 、 用 户 和 使 用 环境 ， 大 致 分 为 如 下 几 类 : 
口碑 用 户 体验 : 让 网 站 深 深 停留 在 用 户 的 脑海 里 ， 用 户 对 网 站 有 好 的 评价 。 
交互 用 户 体验 : 给 用 户 交流 互助 上 的 体验 ， 强 调 互动 性 。 
情感 用 户 体验 : 给 用 户 心理 上 的 体验 ， 强 调 友好 性 。 
浏览 用 户 体 验 : 给 用 户 浏览 上 的 体验 ， 强 调 吸引 性 。 
信任 用 户 体验 : 给 用 户 信任 的 体验 ， 强 调 可 靠 性 、 安 全 性 。 
感 观 用 户 体验 : 呈现 给 用 户 视听 上 的 体验 ， 强 调 舒 适 性 ， 如 色彩 、 字 体 、 布 局 等 。 
用 户 体 验 的 流行 是 因为 有 以 人 为 本 的 思想 因素 ， 更 重要 的 也 有 商业 竞争 的 因素 。 不 难 理 


解 “ 用 户 是 上 帝 ”“ 顾 客 至 上 ”等 类 似 的 口号 ， 就 是 用 户 体验 问题 。 由 此 可 知 ， 用 户 体验 不 
仅仅 存在 于 Web 项 目 中 ， 也 存在 于 社会 的 方方面面 。 





34 


下 面 举 一 个 小 小 的 例子 。 当 年 的 eBay， 注册 一 个 eBay 账户 时 ， 有 第 一 步 、 第 二 步 和 第 
三 步 。 第 三 步 原 来 是 这 样 说 的 : “你 只 要 在 你 的 邮件 中 确认 一 下 ， 你 就 成 功 了 ”。 这 句 话 很 
长 ， 但 是 用 户 不 是 一 个 一 个 字 去 读 ， 他 只 是 一 眼 扫 过 去 ， 可 能 就 理解 为 成 功 了 ， 不 会 再 去 确 
认 邮 件 。eBay 后 来 改 成 “快要 成 功 了 ”5 个 大 字 。 用 户 一 
看 ， 没 有 成 功 ， 理 解 为 下 面 要 做 的 是 写 邮件 。 所 以 几 个 字 就 
让 eBay 提升 了 10%~20% 的 注册 率 ， 相 当 于 每 天 给 它 带 来 一 
百 万 的 最 终 价 值 。 

另 一 个 是 取舍 问题 。Google 搜索 和 百度 搜索 有 一 个 明显 
区 别 是 ，Google 搜索 结果 页 底部 没有 搜索 框 。 据 分 析 底 部 搜 
索 的 概率 非常 低 ， 减 少 这 部 分 就 意味 着 减少 代码 ， 也 就 标志 
着 减少 网 络 传输 的 流量 ， 增 加 展示 速度 。 由 此 就 节省 了 一 笔 
不 小 的 带宽 费用 。 

目前 用 户 体验 是 热门 概念 ， 各 家 说 法 不 一 ， 图 2-8 用 一 些 
关键 字 简 单 描述 了 用 户 体验 的 一 些 要 点 。 


/ 
Findable / ”NAccessible 





it 
\ / 
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图 2-8 用 户 体验 的 一 些 要 点 





2.4.2 表单 的 用 户 体验 改善 


在 视觉 上 的 美化 对 于 本 章 的 范例 是 必需 的 ， 只 是 超过 了 本 书 讲述 的 范畴 ， 此 处 笔者 只 讲 
述 交 互 用 户 体验 的 改善 ， 比 如 密码 安全 涉及 隐私 问题 ， 一 般 各 大 网 站 都 限制 了 最 小 的 密码 长 
度 ， 要 求 字母 数字 组 合 ， 甚 至 加 入 特殊 符号 ， 再 如 光标 应 该 返回 输入 错误 的 地 方 ， 以 减少 用 户 
操作 。 基 于 这 样 的 考虑 ， 可 在 前 面 代码 基础 上 加 入 一 些 交 互 体验 代码 ， 具 体 请 见 【 范 例 2-8】。 


【范例 2-8 改善 表单 的 用 户 体验 】 


<!DOCTYPE html> 

洲 <html> 

3 <head> 

4 <title> 改 善 用 户 体验 的 表单 </title> 

5 <style> 

6 #pwdLvSpan{display:inline-block;width:100px;height:S5px;background: 
#c3c3c3;} 

Te #pwdLvSpan i{display:block;background:green;height:5px;width:0;} 

洛 </style> 

ga </head> 


10. <body> 

a <form method="POST" onSubmit="return eg.regCheck();"> 

12。 <input type="hidden" name="" id="errnum" value="0"/> 

35 账户 : <input type="text" name="" id="userid" /><br/><br/> 

14. 密码 : <input type="password" name="" id="userpwd" /> 密码 强度 <span 
id="pwdLvSpan"><i id="pwdLv"></i></span><br/><br/> 

WD 确认 : <input type="password" name="" id="userpwd2" /><br/><br/> 
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16. 性 别 : <input type="radio" name="sex" value="1" checked="checked"/> 
男 <input type="radio" name="sex" value="0"/> 女 <br/><br/> 


Ds 年 龄 : <select name="" id="age"> 

ES <option value="0" selected="selected"> 请 选择 年 龄 段 </option> 
19. <option value="1">18 岁 以 下 </option> 

205 <option value="2">18-24 岁 </option> 

2 <option value="3">24-30 岁 </option> 

2 <option value="4">30-35 岁 </option> 

kk 洒 <option value="5">35 岁 以 上 </option> 

24. </select><br/><br/> 

2 爱好 : <input type="checkbox" name="like" value="1" class="like"/> 











上 网 <input type="checkbox" nam 
逛街 <input type="checkbox" name= 
看 电影 <input type="checkbox" name="like" value="4"class= 
"like"/> 其 他 <br /><br /> 


like" like"/> 
like" value="3" class="like"/> 





265 简介 : <textarea name="" rows="4" cols="18" id="about"></textarea> 
<br /><br /> 
wis 邮箱 : <input type="text" name id="email" /><br /><br /> 





< 了 <input type="submit" value=" 注 册 " id="regBtn" /> <input type= 
"button" value=" 解 锁 " onclick="eg.unlock()" style="display:none;" 
id="regUnlock" /> 


298 </form> 

305 <script> 

3 var eg = {}; 

// 声 明 一 个 对 象 ， 当 作 命 名 空间 来 使 用 ， 本 书 默 认 的 范例 都 会 以 此 来 方便 管理 

S28 // 定 义 一 个 公共 函数 来 获取 指定 id 元 素 ， 减 少 代码 量 ， 提 高 代码 复 用 率 

33。 eg.$ = function(id){ 

34. return document .getElementById(id); 

35。 J 

36. // 定 义 一 个 公共 函数 来 获取 指定 class 名 称 的 元 素 集合 ， 能 兼容 各 浏览 器 

3 eg.getElementsByClassName = function(className, element) { 

385 if(document .getElementsByClassName){ 

39, return (element || document). 
getElementsByClassName (className) 

40. } 

41. var children = (element || document). 
getElementsByTagName ('*'); 

42. Var elements = new Rrray() 

43. 

44. for (var i = 0; i < children.length; i++) { 

45. var child = children[i]; 

46. var classNames = child.className.split(' '); 

47. for (var j = 0; j < classNames.length; j++) { 

48. if (classNames[j] == className) { 

49. elements.push (child); 
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S05 break; 





Sr 有 

号 2 

-各 } 

54. return elements; 

So ] 

56. // 定 义 一 个 公共 函数 来 解决 事件 监听 的 兼容 问题 

5 eg.addListener = function(target,type,handler){ 
忆 : 丘 if(target.addEventListener) 1{ 

局 target .addEventListener (type,handler, false); 
60. }else if(target.attachEvent)1{ 

61. target .attachEvent ("on"+type,handler); 
2 }elsel{ 

号 区 target["on"+type]=handler; 
64. } 

858 }; 

66. // 主 要 的 验证 方法 

Gas eg.regCheck = function(){ 

68 . var uid = eg.$ ("userid"); 

69. Var upwd = eg.$ ("userpwd"); 

70. Var upwd2 = eg.$ ("userpwd2"); 

mh if(uid.value == ''){ 

72. alert (' 账 户 不 能 为 空 ! ') ; 

了 3 uid.focus(); 

74. eg.err(); 

了 5< return false; 

76, } 

了 7 if(upwd.value == "''){ 

78. alert (' 密 码 不 能 为 空 ! ') ; 

T9: upwd.focus(); 

80. eg.err(); 

81. return false; 

82. } 

83。 if(upwd.value != upwd2.value){ 
84. alert (' 两 次 密码 输入 不 相同 ! ') ; 
85. upwd.focus (); 

86. eg.err(); 

87. return false; 

88 . } 

898 // 新 增 的 部 分 

90. var about = eg.$ ("about"); 

Sls if(about.value.length>60){ 

92. alert (' 简 介 太 长 !'); 

93: about.focus (); 


94. eg.err(); 


95- return false; 


96。 } 

97. // 第 二 次 新 增 部 分 

98. Var age = eg.$ ("age"); 

99. if(age.value == "0"){ 

100. alert (' 请 选择 年 龄 段 ! ') ; 

101. age.focus () ; // 让 输入 框 获得 焦点 

102. eg.err(); 

103。 return false; 

104. } 

055 

106. var likes = eg.getElementsByClassName ("like"); 

LOFs Var likeNum = 0; 

108. forl(var n=0;n<likes.length;n++) { 

109. console.log(likes[n] .checked) 

EL410， if(1ikes[n] .checked){ 

likeNumt++; 

125 } 

Se } 

114. if (likeNum==0){ 

miss alert (' 请 至 少 选择 一 个 爱好 ! ') ; 

于。 eg.err(); 

ky return false; 

ED } 

119. // 邮 箱 验证 

2 var email = eg.$ ("email"); 

121 //if(!new RegExp("^[a-z\\d]+[\\w\\-\.]*@([a-z\\d]+[a-z\\ 
d\\-]*\.)+[a-z] {2,4}$","i") .test (email.value)){ 

2 if(!/^[A-2a-z\d]+[A-Za-z\d\- \.]*@([A-Z2a-z\d]+[A-2Za-z\d\- 
]*\.)+[A-2a-z] {2,4}$/.test (email.value)){ 

3 alert (' 请 输入 正确 的 邮箱 !') ; 

124. email.focus(); // 让 输入 框 获得 焦点 

25 eg.err(); 

126。 return false; 

7 } 

128. return true; 

129'. ] 7 

0 // 添 加 一 些 交互 事件 

3 eg.addEvent = function(){ 

2 var pwd = eg.$ ("userpwd"); 

33% eg.addListener (pwd, "keyup", function(){ 

134. var lv=0; 

135% if(/^\d{4,}$/.test (pwd.value)){ 

i136 lv = 102 

3 }else if(/^\w{4,}$/.test(pwd.value)){ 
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lv = 25; 
}else if (/^[\d\w] {4,}$/.test (pwd.value)){ 
lv = 50; 


lelse if (/^[\d\w~!@#$%\^E*\(\)\={}HN\IN\] 


=<>,\.\?\/]{4,}$/.test (pwd.value)){ 


lv 100; 
}else if(pwd.value.length<6 && pwd. 
value.length>3){ 
lv = 60; 
}else if(pwd.value.length<4){ 
lv= 0; 


eg.$ ("pwdLv") .style.width = lv+"px"; 
Hr 
} 
// 在 用 户 单 击 “ 注 册 ” 按 钮 前 就 要 运行 起 来 ,所 以 定义 好 就 立刻 调用 
eg.addEvent (); 
// 出 错时 记录 错误 次 数 
eg.err = function(){ 
Var el = eg.$ ("errnum"); 
var old = el.value; 
el.value = parseInt (old)+1; 
// 把 字符 串 转 换 为 整数 +1， 并 保存 起 来 
eg.1lock () ; // 用 来 检查 是 否 应 该 锁定 
}; 
// 通 过 次 数 判 断 是 否 要 锁定 注册 
eg.lock = function(){ 
Var err = eg.$ ("errnum"); 
if(parseInt (err.value)>2){ 
eg.$ ("regBtn") .disabled = true; 
// 根 据 业 务 需 求 ， 输 错 3 次 就 锁定 
eg.$ ("regUnlock") .style.display="block"; 
// 同 时 显示 解锁 按钮 


}; 
// 解 锁 
eg.unlock = function(){ 
eg.$ ("regBtn") .disabled = false; 
// 根 据 业务 需求 ， 解 锁 就 是 让 用 户 可 以 重新 注册 
eg.$ ("regUnlock") .style.display="none"; 
} 


</script> 


</body> 
</html> 
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在 【范例 2-8】 中 会 看 到 focus() 函 数 ， 这 些 事件 和 方法 属于 DHMTL 的 内 容 ， 更 多 方法 


请 读者 自行 查阅 相关 资料 ， 笔 者 为 较为 熟练 的 读者 提供 一 个 快速 查阅 的 方式 通过 Firebug 
工具 (在 Firefox 下 安装 后 可 用 F12 调 出 来 ) 可 以 调 阅 出 来 ， 效 果 如 图 2-9 所 示 。 
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图 2-9 【范例 2-8】 运 行 效果 ( 左 ) 和 在 Firebug 工具 下 查看 DHTML 元 素 事件 〈 右 ) 


2.5 相关 参考 
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@ 超 文本 标记 语言 (第 一 版 ) 一 一 在 1993 年 6 月 发 布 互联 网 工程 工作 小 组 (IETF ) 工 


作 草 案 ( 并非 标准 ) ， 可 访问 : http://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt。 


e HTML2.0 一 一 1995 年 11 月 作为 RFC 1866 发 布 ， 在 RFC 2854 于 2000 年 6 月 发 布 之 


后 被 宣布 已 经 过 时 ， 可 访问 : http://www.ietf.org/rfe/rfc1866.txt。 


e HTML3.2 一 一 1997 年 1 月 14 日 ，W3C 推荐 标准 ， 可 访问 : https:/www.w3.org/TR/ 


REC-html32, 


e HTML4.0 一 一 1997 年 12 月 18 日 ，W3C 推荐 标准 ， 可 访问 : https://www.w3.org/TR/ 


REC-html40/. 


e HTML4.01 (微小 改进 ) 一 一 1999 年 12 月 24 日 ，W3C 推荐 标准 ， 可 访问 : 


https://www.w3.0rg/TR/html401/. 


e XHTML1.0 一 一 在 2000 年 1 月 26 日 成 为 W3C 的 推荐 标准 ， 可 访问 : 


https://www.w3.0rg/TR/xhtml1/. 


e HTML5 一 一 在 2008 年 1 月 22 日 ， 第 一 份 正式 草案 发 布 ， 可 访问 : 


https://www.w3.org/TR/html5/. 


第 3 章 用 JavaScript 实现 照片 展示 


构建 软件 设计 的 方法 有 两 种 : 一 种 是 把 软件 做 得 很 简单 以 至 于 明显 找 不 到 缺陷 ; 另 一 种 
是 把 它 做 得 很 复杂 以 至 于 找 不 到 明显 的 缺陷 。 
一 一 C.A.R.Hoare，1980 年 图 灵 奖 获得 者 


在 这 个 自拍 的 时 代 ， 照 片 是 要 展示 的 。 前 面 的 章节 里 已 经 讲解 了 事件 的 绑 定 ， 本 章 主要 
利用 前 面 的 知识 开发 照片 展示 的 功能 。 

本 章 主要 内 容 : 

。 照片 的 加 载 

。 饼 标 的 响应 

。 键盘 的 响应 





3.1 功能 设计 


功能 设计 的 时 候 可 能 需要 反复 修改 ， 以 什么 为 标准 呢 ? 听 老 板 的 还 是 听 用 户 的 ? 虽然 这 
是 一 个 “顾客 就 是 上 帝 ” 的 时 代 ， 但 有 些 设 计 原 则 还 是 要 遵循 的 ， 因 为 有 时 候 “ 上 帝 ” 也 会 
犯错 误 ， 更 多 的 时 候 “ 上 帝 ” 是 善 变 的 。 

(1) 避免 重复 原则 (DRY，Don”t repeat yourself) ， 编 程 的 最 基本 原则 是 避免 重复 ， 换 
句 话说 就 是 提高 代码 复 用 率 。 

(2) 简单 原则 (Keep It Simple and Stupid) ,简单 是 用 户 最 佳 体验 之 一 ， 像 苹果 就 是 用 
简单 打败 一 切 。 简 单 的 代码 占用 时 间 少 、 漏 洞 少 ， 并 且 易 于 修改 。 

(3) 低 耦 合 原则 (Minimize Coupling) ， 即 这 部 分 代码 的 使 用 和 修改 影响 到 其 他 部 分 的 
代码 要 尽 可 能 地 少 ， 和 否则 牵 一 发 而 动 全 身 的 悲剧 无 人 愿意 看 到 。 

(4) 别 让 我 思考 (Don”t make me think) ， 代 码 不 仅 是 写 给 机 器 的 ， 更 多 是 写 给 人 看 
的 ， 所 以 编写 的 代码 一 定 要 易于 读 易于 理解 ， 最 终 才 易于 维护 。“ 如 果 一 个 维护 者 不 再 继续 
维护 你 的 代码 ， 很 可 能 他 是 有 想 杀 了 你 的 冲动 。” 

(5) 单一 责任 原则 (Single Responsibility Principle) ， 某 个 代码 的 功能 ， 应 该 保证 只 有 
单一 的 明确 的 执行 任务 ， 和 否则 一 旦 修改 会 增加 关联 测试 的 烦琐 程度 。 


(6) 最 大 限度 凝聚 原则 (Maximize Cohesion) ， 尽 量 将 功能 相似 相近 的 代码 放 在 同一 个 
部 分 。 程 序 中常 听 到 的 “类 ”这 个 词 就 取 之 于 “ 物 以 类 聚 ”， 类 就 是 为 了 “类 聚 ” 相 似 相 近 
的 代码 。 

(7) 避免 过 早 优化 (Avoid Premature Optimization) ， 现 在 社会 到 处 都 有 “完美 主义 
者 ”， 如 果 代 码 运行 没有 想象 中 的 慢 ， 就 别 去 “完美 ” 它 ， 和 否则 要 花费 更 多 的 代价 。 


3.1.1 HTML、CSS 和 JavaScript 的 分 层 关系 


通过 第 1 章 我 们 了 解 到 HTML 是 最 早出 来 的 ，CSS 和 JavaScript 则 稍 晚 出 现 。 它 们 实质 
上 的 关系 应 该 如 图 3-1 所 示 。 





CSS JavaScript 


HTML 


3-1 UI 分 层 关系 结构 


看 到 这 里 似乎 应 该 思考 一 下 前 面 的 范例 是 否 有 “ 重 构 ” 的 空间 ? 答案 是 肯定 的 。 重 构 原 
因 之 一 就 是 代码 是 否 便于 阅读 。 如 果 在 设计 时 一 开始 就 考虑 进去 ， 会 使 后 期 的 维护 工作 变 得 
相对 便捷 ， 找 HTML 代码 的 就 直接 找 html 文件 ， 找 JavaScript 代码 的 就 直接 找 js 文件 ， 找 
CSS 代码 的 就 直接 找 css 文件 。 

将 JavaScript 和 HTML 分 离 是 前 端 必须 要 做 的 一 件 事 。JavaScript 的 诞生 是 要 让 HTML 
更 丰富 ， 而 不 是 更 杂乱 。 混 合 在 一 起 会 导致 : bug 跟踪 工具 难以 调试 。 随 着 分 工 更 细 化 ， 编 
写 HTML 的 人 不 一 定 要 负责 编写 JavaScript。 

CSS 和 HTML 一 般 也 是 分 离 的 ， 不 过 这 大 都 是 网 页 设计 师 或 者 前 端 重 构 工程 师 的 任务 。 

另外 ， 保 持 CSS 和 JavaScript 之 间 清 晰 的 分 离 很 有 挑战 性 ， 例 如 第 2 章 的 范例 有 控制 
style.width 的 ， 还 有 控制 style.display 的 ， 是 否 需 要 完全 分 离 确实 需要 视 具体 情 况 而 定 ， 不 过 
如 果 完 全 不 注意 这 一 点 ， 任 由 其 发 展 ， 一 旦 出 现 问题 ， 大 家 首先 去 找 CSS， 精 疲 力 尽 时 才 会 
去 JavaScript 中 查找 样式 问题 。 

















3.1.2 照片 展示 功能 设计 


网 易 是 国内 早期 提供 相册 功能 的 公司 之 一 ， 相 册 用 户 群 体 很 大 ， 参 考 其 相册 会 发 现 ， 照 
片 展示 的 基本 功能 如 下 : 


。 有 大 图 和 缩 略图 。 

。 有 上 一 张 图 和 下 一 张 图 切换 。 

。 有 键盘 控制 显示 上 一 张 图 和 下 一 张 图 . 
。 有 显示 上 一 组 和 下 一 组 功能 。 
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3.2 照片 加 载 与 定位 


根据 功能 设计 ， 可 以 先 写 好 HTML 结构 基础 ， 再 配合 CSS 做 出 大 致 效果 ， 最 后 用 
JavaScript 加 上 各 种 动作 。 首 先 请 看 HTML 代码 结构 。 


3.2.1 HTML 代码 


将 CSS 代码 保存 到 eg3.css 文件 中 ，JavaScript 代码 保存 到 eg3.js 文件 中 ， 这 样 让 HTML 
代码 更 加 干净 ， 详 见 【 范 例 3-1】。 


【范例 3-1 照片 展示 的 HTML 代码 】 





1. <!DOCTYPE html> 

2. <html> 

3 <head> 

Ae <title> 照 片 展示 </title> 

5 <link rel="stylesheet" href="eg3.css" type="text/css" /> 

党 </head> 

ye <body> 

8. <div id="bigPhoto"><img id="bigPhotoSrc" src="photo01.jpg" width="620" 
height="450" border="0" alt=""></div> 

9. <div id="smallPhotos"> 

10 <span id="prve"></span> 

1 <ul id="smallPhotosList"> 

这 </ul> 

Lk, <span id="next"></span> 

14. </div> 

5 <script src="eg3.js"></script> 

16. </body> 

17. </html> 
比 前 面 章 节 的 范例 看 上 去 更 加 简洁 了 吧 ? 重 构 的 目的 在 于 得 到 这 样 的 效果 ， 这 可 以 说 是 

开发 人 员 的 用 户 体验 。 


3.2.2 CSS 代码 


直接 预览 【范例 3-1】 肯 定 是 乱七八糟 的 ， 在 eg3.css 中 写 好 布局 和 定位 的 代码 之 后 效果 
就 大 不 一 样 了 ， 如 图 3-2 所 示 ，CSS 代码 见 【 范 例 3-2】。 


【范例 3-2 照片 展示 的 CSS 代码 】 
Ul Li{ 
list-style: none; 
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昌 1 

4 #smallPhotos{width:620px; margin: 10Px 0;} 

= #smallPhotosList{margin: 0 auto; width:580px; float:left;padding: 0;} 
6. #smallPhotosList 1i{ 
7 

8 

9 


float:left; /* 左 浮动 */ 
margin-left: 10px; /* 左 外 边 距 10 像素 */ 

$s _margin-left:8px; /* 这 是 专门 针对 IE6 间隙 太 大 而 设置 的 */ 

10. } 

es #smallPhotosList imgf 

2 border:2px solid #000; 

cursor:pointer; /* 鼠 标 样式 */ 

14. } 

15% #prve{ 

16。 background: url (icon prve.jpg); 

从 证 height: 40px; 

18. width:20px; 

19. display: inline-block; /* 让 span 标签 变 成 块 级 元 素 */ 

20. float: left; 

edi EE cursor:pointer; 

2 } 

2 #next { 

24. background: url (icon next.jpg); 

二 height:40px; 

26. width:20px; 

人 display: inline-block; 

28 . float: right; 

29 cursor:pointer; 

30. } 


这 些 CSS 再 加 上 后 面 【范例 3-3】 的 JavaScript 代码 ， 效 果 就 大 不 一 样 了 ， 请 看 图 3-2 加 
载 CSS 代码 的 前 后 对 比 。 





PS BY Z3F 


me WY | 





图 3-2 加 载 CSS 代码 前 后 
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针对 不 同 的 浏览 器 写 不 同 的 CSS code 的 过 程 ， 就 叫 CSS hack。CSS hack 的 存在 是 因为 
不 同 的 浏览 器 (比如 正 6、IE 7 等 ) 对 CSS 的 解析 认识 不 一 样 ， 会 导致 页 面 效 果 不 同 ， 得 不 
到 我 们 所 需要 的 页 面 效果 。 这 时 候 需要 针对 不 同 的 浏览 器 去 写 不 同 的 CSS code， 让 它 能 够 同 
时 兼容 不 同 的 浏览 器 。 

CSS hack 大 致 有 3 种 表现 形式 ，CSS 类 内 部 hack、 选 择 器 hack 以 及 HTML 头 部 引用 (if 
IE) hack，CSS hack 主要 针对 正 浏 览 器 ， 有 一 个 比较 全 的 CSS hack 表 ， 如 图 3-3 所 示 。 
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图 3-3 比较 全 的 CSS Hack 表 





























图 3-3 是 早期 的 hack 大 全 ， 而 现在 很 多 标准 浏览 器 〈 如 Firefox、Chrome 等 ) 都 更 新 很 
快 ， 有 些 hack 已 经 无 效 。 在 中 国 ， 各 版 本 正 还 有 大 量 存留 ， 下 面 是 一 些 IE 6~IE 9 常用 CSS 
hack: 
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<style> 
div{ display:none; margin:10px;} 
.IE{display:block\9;} 
.IE6{ display:block;} 
.IE6{-color:blue;} 
.IE7{*display:block;} 
.IE7{+color:blue;} 
.IE7{#color:red;} 
.IE8910{display:block\0;} 
:root .IE910{display:block\9;} 
.other{ [display:block;display:block;]} 

</style> 

<div class="IE"> 所 有 IE 识别 </div> 


<div IE8910">IE8910 识别 </div> 
<div IE910">IE910 识别 </div> 
<div IE6">IE6 识别 </div> 

<div IE7">IE7 识别 </div> 








<div class="IE8">IE8 识别 </div> 
<div class="other"> 标 准 浏 览 器 识别 </div> 


3.2.3 JavaScript 代码 


随 着 JavaScript 代码 越 来 越 长 ， 用 EditPlus 工具 就 有 些 不 顺手 了 ， 于 是 笔者 改 用 Sublime 
Text 3。 图 3-4 就 是 使 用 Sublime Text 3 声明 eg 对 象 及 第 2 章 里 用 过 的 eg.$、 


eg.getElementsByClassName 和 eg.addListener 


46 


:个 公共 方法 的 代码 。 


/* 隐 藏 div 通过 不 同 的 hack 将 其 显示 */ 
/*IE6 IE7 IE8 IE9 IE10 识别 */ 
/*IE6 识别 */ 

/*IE6 识别 */ 

/*IE6 IE7 识别 */ 

/*IE6 IE7 识别 */ 

/*IE6 IE7 识别 */ 

/*IE8910 识别 */ 

/*IE9 IE10 识别 */ 

/*safari Chrome 等 识别 */ 





四 =\o3\eg3js - Sublime Text (UNREGISTERED) 


回 inelcoumni 





File Edit Selection Find View Goto Tools Project Preferences Help 





[= | © es 


Tab Sze4 











图 3-4 用 Sublime Text 3 编写 JavaScript 代码 


只 要 是 写 过 对 象 、 属 性 、 方 法 ， 在 Subilime Text 3 旨 





有 都 会 有 自动 完成 功能 ， 用 起 来 很 方 


便 ， 除 此 之 外 ， 要 定义 一 些 相片 数据 和 默认 显示 的 照片 ， 如 【范例 3-3】 所 示 。 
【范例 3-3 照片 展示 的 JavaScript 代码 】 


// 默 认 显示 
// 当 前 显示 的 组 
// 每 组 的 数量 


// 每 次 显示 时 要 清空 旧 的 内 容 
// 计 算 需 要 的 data 数据 的 开始 位 置 
// 计 算 需 要 的 data 数据 的 结束 位 置 


1i.innerHTML = '<img src="'+teg.data[i] [1]+'" id="thumb'+ 


// 追 加 元 素 


// 初 始 化 要 显示 的 


和 // 定 义 数据 
总 eg.data = [ 
3 ["photo01.jpg", "thumb01 .jpg"] 
4. 7 ["photo02.jpg", "thumb02.jpg"] 
5 7 ["Photo03.jpg", "thumb03.jpg"] 
6 :["photo04.jpg", "thumb04.jpg"] 
i :["photo05.jpg", "thumb05.jpg"] 
8. :["Photo06.jpg", "thumb06.jpg"] 
9。 7 ["Pphoto07.jpg", "thumb07 .jpg"] 
0 ， ["photo01.jpg", "thumb01 .jpg"] 
rh 7 ["photo02.jpg", "thumb02.jpg"] 
2 7 ["Photo03.jpg"v"thumb03.jPg"] 
135 7 ["Photo04.jpg"，,"thumb04.jpg"] 
a :["photo05.jpg", "thumb05.jpg"] 
Ss ,["photo06.jpg", "thumb06.jpg"] 
16. ， ["photo07.jpg", "thumb07.jpg"] 
EE Ys 
3 eg.showNumber = 0; 
9 eg.groupNumber = 1; 
20< eg.groupSize = 6; 
2 eg.showThumb = function(group){ 
2 var ul = eg.$ ("smallPhotosList"); 
之 3 ul.innerHTML = ''; 
bp Var start = (group-1)*eg.groupSize; 
De Var end = group*eg.groupSize 
2 for (var i=start; (i<endg&i<eg.data.length);i++){ 
// 循 环 数 据 ， 并 根据 数据 生成 HTML 后 插入 小 图 列表 里 
2 var li = document.createElement ("1i"); 
28, 
i+'"width="80" height="40"/>'; 
29.。 ul.appendCchild(1i); 
30: 3 
3 }; 
32% eg.init = function(){ 
35 eg.showThumb (1) 
34. }; 
35% eg.init(); 


通过 eg.initO 的 调用 ， 首 先 初始 化 出 第 一 组 照片 ， 并 能 够 让 鼠标 单 击 小 图 而 显示 大 图 。 
eg.showThumb 主要 的 功能 就 是 生成 指定 某 一 组 的 几 幅 照片 。 
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3.3 响应 鼠标 动作 


图 3-2 的 效果 已 经 有 了 ， 需 要 鼠标 来 操作 展示 想 看 的 照片 ， 这 就 需要 在 相应 的 地 方 加 上 


事件 。 


3.3.1 响应 小 照片 单 击 动作 


前 面 的 【范例 3-3】 里 提供 了 显示 小 图 列表 的 eg.showThumb0) 方 法 ， 在 单 击 小 图 片 时 要 
显示 大 图 片 ， 这 需要 调用 eg.showBig0) 方 法 ， 只 有 在 单 击 小 图 片 的 时 候 响 应 单 击 事件 才 行 ， 


所 以 需要 用 eg.addListener() 方 法 来 实现 ， 具 体 代码 见 【 范 例 3-4】。 
【范例 3-4 响应 小 照片 单 击 动作 】 


是 区 eg.showThumb = function (grouP){ 
区 var ul = eg.$ ("smallPhotosList"); 
3 ul.innerHTML = ''; // 每 次 显示 时 要 清空 旧 的 内 容 
泛 var start = (group-1)*eg.groupSize; // 计 算 需 要 的 data 数据 的 开始 位 置 
5 var end = group*eg.groupSize // 计 算 需 要 的 data 数据 的 结束 位 置 
I for (var i=start; (i<endgg&i<eg.data.length);i++){ 
i Var li = document.createElement ("1i"); 
汪 li.innerHTML ='<img src = "'+teg.datal[i] [1]+'"id="thumb'+i+ 
'wwidth ="80" height="40"/>'; 

3 (function (i){ 
0 eg.addListener (li,"click",function(){ 

// 增 加 click 事件 监听 
人 eg.showNumber = i; 

// 记 录 选 中 的 图 标 序号 ， 供 其 他 函数 调用 
2 eg.showBig(); 
13。 }) 7 
A Py // 将 二 作为 值 传递 进去 
15。 ul.appendChild(1i)7 
工 6 } 
9。 } 
La eg.showBig = function(){ / /根据 某 个 编号 显示 大 图 
19. eg.$("bigPhotoSrc") .src = eg.$ ("thumb"+eg.showNumber) .src. 

replace ("thumb","photo"); 

20. ha 


【范例 3-4】 中 第 9 行 就 是 响应 小 照片 单 击 动作 的 代码 ， 这 里 使 用 了 一 个 闭 包 ， 





即 一 个 


自 调用 的 匿名 函数 。(function(){})0 是 最 简单 的 闭 包 。 大 括号 中 的 内 容 会 顺序 执行 。 如 果 去 掉 


第 9 行 和 第 14 行 的 代码 ， 会 发 现 始终 显示 当前 组 照片 中 的 最 后 一 张 ， 在 for 循环 体 呈 
用 闭 包 把 变量 值 传 到 内 部 的 绑 定 事件 里 。 
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8 一般 要 





3.3.2 响应 小 照片 上 一 组 或 下 一 组 单 击 动作 


响应 小 照片 上 一 组 或 下 一 组 单 击 动作 的 代码 如 【范例 3-5】 所 示 。 
【范例 3-5 响应 小 照片 上 一 组 或 下 一 组 单 击 动作 】 





5 eg.init = function(){ 

2 eg.showThumb (1); // 初 始 化 要 显示 的 

人 eg.addListener (eg.$ ("next"),"click",function(){ 

4. eg.nextThumb (); 

5。 Ty 

6. eg.addListener(eg.$ ("prve"),"click",function(){ 

和 eg.prveThumb (); 

8. Fy 

9. }; 

EDs eg.nextThumb = function(){ // 显 示 下 一 组 小 图 列表 
Le if((eg.groupNumber*eg.groupSize) +1 <= eg.data.length){ 
a eg.showThumb (eg .groupNumber+1); 

3 eg.showNumber = eg.groupNumber*eg.groupSize; 

14. eg.showBig(); 

5 eg.groupNumber++; 

5 } 

b yy 

18. eg.prveThumb = function(){ // 显 示 上 一 组 小 图 列表 
19 。 if(eg.grouPNumber - 1>=1){ 

20° eg.showThumb (eg .groupNumber-1); 

2 eg.groupNumber--; 

2 eg.showNumber = eg.groupNumber*eg.groupSize-eg.groupSize; 
3 eg.showBig() 7 

24. 二 

25, }s 


eg.prveThumb 和 eg.nextThumb 分 别 是 上 一 组 和 下 一 组 的 逻辑 控制 函数 。 写 好 这 两 个 函数 


后 ， 还 要 将 eg.init 绑 定 到 鼠标 事件 onclick 上 。 


3.4 响应 键盘 动作 


通常 我 们 都 有 用 键盘 来 查看 照片 的 习惯 ， 下 面 介 绍 如 何 用 键盘 来 一 幅 一 幅 地 查看 照片 。 


3.4.1 常见 键盘 按键 对 应 的 ASCII 码 值 
键盘 上 每 一 个 键 都 定义 了 一 个 ASCII 码 值 ， 请 参考 表 3-1。 


表 3-1 常见 键盘 按键 对 应 的 ASCII 码 值 


























键 面值 键 码 键 面值 
a 65 b 

d 68 e 

g 71 h 

j 74 k 

m Ld n 

Pp 80 q 

S 83 t 

V 86 Ww 

y 89 Zz 

0 48 Fl 

! 多 己 


Pa | EF 
3 3 
4 2 rs 

s 3 
4 图 m 

7 5 上 









































表 3-1 只 是 列举 了 常用 的 按键 ， 更 多 按键 可 上 网 查询 。 


3.4.2 响应 键盘 动作 
响应 键盘 动作 的 代码 见 【 范 例 3-6】。 
【范例 3-6 响应 键盘 动作 】 


和 eg.init = function(){ 
2 eg.showThumb (1); // 初 始 化 要 显示 的 小 图 列表 
3 eg.addListener (eg.$ ("next"),"click",function(){ 
// 单 击 上 一 组 图 标 时 
ys eg.nextThumb (); // 显 示 下 一 组 小 图 列表 
5 1D); 
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eg.addListener (eg.$ ("prve"),"click",function(){ 
// 单 击 下 一 组 图 标 时 
eg.prveThumb (); // 显 示 上 一 组 小 图 列表 
Ds; 
eg.addListener (document, "keyup", function(e){ 


e= €@ || event; 

if(e.keyCode == 37){ // 按 左 方向 键 -时 
eg.prvePhoto(); // 显 示 上 一 张大 图 

1 

if(e.keyCcode == 39){ // 按 右 方向 键 -时 
eg.nextPhoto(); // 显 示 下 一 张大 图 


]}) 7 


eg.nextPhoto = function(){ 


}; 


if(eg.showNumber%eg.groupSize == (eg.groupSize-1)){ 


eg.nextThumb () 

}else if(eg.showNumber<eg.data.length-1){ 
eg.showNumber++; 
eg.showBig (); // 显 示 大 图 


eg.PprvePhoto = function(){ 


] 7 


if(eg.showNumber == ((eg.groupNumber-1)*eg.groupSize)){ 
eg.prveThumb () 

}else if(eg.showNumber>0)1{ 
eg.showNumber--; 
eg.showBig(); 


键盘 事件 的 主要 代码 是 【范例 3-6】 中 的 第 9 行 ， 它 监听 了 document 的 onkeyup 事 
件 ， 这 时 候 我 们 按 左 箭头 键 〈 一 ) 和 右 箭头 键 (一 ) 就 可 以 通过 上 一 张 、 下 一 张 进行 照片 
浏览 了 。 
下 面 是 几 个 主要 的 键盘 事件 。 
onkeydown 是 在 用 户 按 下 任何 键盘 键 ( 包括 系统 按钮 ， 如 箭头 键 和 功能 键 ) 时 发 生 。 
onkeypress 是 在 用 户 按 下 并 放 开 任何 字母 数字 键 时 发 生 。 系 统 按钮 ( 如 箭头 键 和 功能 


键 ) 无 法 得 到 识别 。 


onkeyup 是 在 用 户 放 开 任何 先前 按 下 的 键盘 键 时 发 生 。 
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3.5 代码 分 离 带 来 的 红利 


在 分 离 结构 下 ， 在 不 改变 HTML 和 JavaScript 代码 的 情况 下 就 可 以 得 到 图 3-5 的 效果 。 该 
效果 的 CSS 代码 在 【范例 3-2】 的 基础 上 做 少量 修改 即 可 ， 具 体 的 对 比 差异 见 【 范 例 3-7】。 





RET IT ht 四 图- He 刀 最 滞 一 








PS BY z3F 





图 3-5 另 一 种 风格 的 照片 展示 


【范例 3-7 另 一 种 风格 照片 展示 的 CSS 代码 】 


ul,li{list-style: none;} 

#bigPhoto{width:620px; float:left;} // 指 定 宽度 ， 向 左 浮动 
#smallPhotos{width:100px; float:left;} // 指 定 宽度 ， 也 让 小 图 列表 靠 紧 大 图 向 左 浮动 
#smallPhotosList{ margin: 0 auto; width:100px; padding: 0;} 
#smallPhotosList li{margin-left: 1l0px;margin-top: 10px;} 

#smallPhotosList img{border:5px solid #000;cursor:pointer;} 
#prve{background:url (icon prve2.jpg) ;height:20px;width:40px;margin-left: 
30px; display: inline-block;cursor:pointer;} 
#next{background:url (icon next2.jpg);height:20px;width:40px;margin-left: 
30px; display: inline-block;cursor:pointer;} 





将 对 CSS 和 HTML 分 离 之 后 使 用 起 来 很 方便 ， 扩 展 也 很 灵活 ， 随 着 JavaScript 代码 不 断 
累积 ， 具 有 某 些 共性 的 JavaScript 代码 被 分 离 并 重新 组 织 为 一 些 公 共 库 或 某 些 特殊 功能 的 类 
库 ， 比 如 jQuery 就 是 主要 操作 DOM 对 象 的 一 个 优秀 的 开源 库 。 











3.6 相关 参考 


e http://www.dynamicdrive.com——DHTML. 





® https://msdn.microsoft.com/en-us/library/hh772687(v=vs.85).aspx: DHTM™L. 
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第 4 章 AJAX 一 一 无 刷新 的 用 户 体 验 


AJAX 的 发 展 完全 超出 我 的 预料 之 外 。 
一 一 /Jesse James Garrett, AJAX 之 父 


本 章 将 介绍 Web 应 用 中 使 用 最 为 广泛 的 AJAX 技术 ， 它 也 是 提高 用 户 体验 最 主要 的 支撑 
技术 。AJAX 是 一 项 革命 性 技术 ， 它 是 在 不 创造 新 技术 、 新 编程 语言 的 前 提 下 诞生 的 一 个 事 
实 性 标准 。AJAX 也 减轻 了 后 端 程序 员 的 工作 压力 ， 为 前 端 工业 化 、 职 业 化 奠定 了 一 定 基 
础 ， 很 多 项 目 中 前 端 占有 比重 甚至 超过 了 后 端 ， 而 AJAX 的 比重 又 占据 前 端 半壁 江山 。 因 此 
学 好 AJAX 对 理解 项 目 中 的 前 端 业务 具有 举足轻重 的 作用 。 


本 章 在 讲解 实例 的 同时 还 将 介绍 一 些 基础 知识 ， 主 要 知识 点 : 
8 AJAX 是 技术 不 是 编程 语言 
e@ 异步 与 同步 

@ JSON 数据 交换 格式 

e@ XMLHttpRequest 对 象 


4.1 认识 AJAX 


目前 绝 大 多 数 网 站 都 直接 或 间接 使 用 了 AJAX 技术 ， 它 是 一 种 支持 良好 的 、 公 开标 准 
的 、 久 经 检验 的 、 可 放心 使 用 的 技术 。 





4.1.1 AJAX 是 技术 不 是 编程 语言 


AJAX 不 是 一 门 和 C 语言 类 似 的 编程 语言 ， 是 聪明 的 程序 员 对 JavaScript 的 第 一 次 创造 
性 用 法 。 第 二 次 对 JavaScript 的 创造 性 用 法 则 是 后 面 要 讲 到 的 Node.js 技术 。 

AJAX 这 个 词 最 早 是 AJAX 之 父 Jesse James Garrett 于 2005 年 2 月 在 hjax: 4 New 
Approach to Web Applications 中 提出 来 的 ， 是 Asynchronous JavaScript And XML (异步 
JavaScript 和 XML) 的 简称 。 它 基于 已 有 的 标准 ， 而 这 些 标准 已 被 使 用 多 年 ， 所 有 现代 浏览 


器 都 支持 AJAX 的 实现 ， 包 括 老 掉 牙 的 正 6， 甚 至 几乎 快 灭 绝 的 下 5。 

虽然 文章 的 传播 提高 了 人 们 使 用 该 项 技术 的 意识 ， 但 最 早 使 用 这 种 技术 的 历史 可 以 追溯 
到 1998 年 ， 由 微软 的 项 目 小 组 率先 使 用 。 直 到 后 来 Google 通过 其 Google Suggest 等 产品 使 
AJAX 变 得 流行 起 来 。 

Google Suggest 使 用 AJAX 创造 出 了 动态 性 极 强 的 Web 界面 : 当 在 谷歌 的 搜索 框 输入 关 
键 字 时 ，JavaScript 会 把 这 些 字 符 发 送 到 服务 器 ， 然 后 服务 器 会 返回 一 个 搜索 建议 的 列表 ， 其 
中 之 一 就 是 我 们 最 常见 到 的 自动 完成 。 百 度 类 似 Google Suggest 的 应 用 如 图 4-1 所 示 。 








(1 
Bai 合 百度 


新 闻 网 页 贴吧 知道 音乐 图 片 视频 地 图 
ajax| 百度 一 下 
| aa 硬 各 | 
alax 实 例 
alax 原 理 
ajax post 
alarfileupload 














alaxjquery 
ajax 跨 域 
alax 提 交 表 单 

| ajaxjspn 

| alax 是 什么 








图 4-1 在 百度 搜索 中 的 自动 完成 


AJAX 前 景 非 常 乐观 ， 可 以 提高 系统 性 能 ， 优 化 用 户 界 面 ， 学 习 简 单 ， 开 发 方便 。 就 目 
前 而 言 ， 很 多 著名 JavaScript 框架 都 有 AJAX 相关 的 API， 包 括 本 书 讲 到 的 jQuery。 


4.1.2 同步 与 异步 


AJAX 中 的 Asynchronous 就 是 异步 的 意思 ， 这 是 相对 于 传统 同步 方式 而 言 的 。 
异步 传输 基于 字符 ， 同 步 传输 基于 比特 。 同 步 传输 的 时 候 要 求 接收 端 和 发 送 端 保持 通信 
- 致 ， 而 异步 则 不 要 求 。 理 解 这 个 差异 最 常见 的 例子 是 键盘 和 主机 的 通信 ， 按 一 个 键 就 发 送 
按键 值 ， 主 机 不 知道 用 户 何 时 会 按键 ， 所 以 主机 必须 随时 能 接收 。 
在 Web 网 页 上 也 体现 出 一 组 同步 和 异步 的 情况 ， 下 面 通过 【范例 4-1】 来 说 明 。 


【范例 4-1 js 文件 加 载 时 的 异步 】 


<html> 

2。 <head> 

区 <title>async or sync</title> 
4. </head> 

5 <body> 
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6 <div id="msg"></div> 

7 <script> 

8. var async= document.createElement ('script'); 

9. // 文 件 内 容 仅 是 : document .getElementById ("msg") .innerHTML+="async<br/>"; 
0s async.src='4-1.async.js?r='+Math.random()*99; 

Ti document .body.appendChild (sync); 


2 </script> 

下 3 <!-- 文 件 内 容 仅 是 document .getElementById ("msg") .innerHTML+="sync<br/>";--> 
14. <script src="4-1.sync.js"></script> 

15. </body> 

TOR </html> 


在 标准 浏览 器 下 运行 代码 后 会 发 现 ， 可 能 先 会 输出 “sync” 的 字符 串 ， 然 后 才 是 
“async”。 网 页 是 自 上 而 下 执行 代码 的 ， 为 什么 明明 操作 “async” 的 代码 在 前 面 却 不 能 保 
证 一 定 先 执行 呢 ? 这 里 存在 网 络 通信 不 一 致 的 情况 和 浏览 器 缓存 问题 。 

从 直观 上 来 看 ， 这 就 是 个 先后 问题 ， 从 技术 深层 去 看 ， 它 不 是 什么 线程 问题 ， 而 是 设计 
思想 问题 。 

异步 模式 是 一 个 巨大 的 进步 ， 当 打开 一 个 网 页 时 ， 花 费 很 多 时 间 等 待 服务 器 提供 给 用 户 
的 信息 可 能 很 多 是 用 户 不 想 要 的 ， 在 同步 时 代 ， 这 就 是 很 大 的 浪费 。 当 然 异 步 模式 的 产生 也 
有 其 更 为 复杂 的 因素 。 

通过 AJAX 技术 ，JavaScript 异步 操作 时 无 须 等 待 服务 器 的 响应 ， 而 是 : 

e@ 在 等 待 服务 器 响应 时 执行 其 他 脚本 或 任务 。 

e@ 当 响 应 就 绪 后 对 响应 数据 进行 处 理 。 


4.1.3 AJAX 与 JSON 


AJAX 提供 与 服务 器 异步 通信 的 能 力 ， 一 个 最 简单 的 应 用 是 无 须 刷 新 整个 页 面 而 在 网 页 
中 更 新 一 部 分 数据 。 因 此 ，AJAX 可 使 Web 应 用 程序 更 小 、 更 快 、 更 友好 。 

AJAX 包括 异步 、JavaScript 和 XML， 这 是 最 初 的 外 延 ， 目 前 ，JSON 已 经 成 为 流行 的 数 
据 交 换 格式 之 一 ， 在 实际 Web 应 用 中 ，JSON 已 逐步 代替 了 XML 格式 ， 成 为 AJAX 实践 中 
最 主要 的 数据 交换 格式 。 

可 以 通过 【范例 4-2】 和 【范例 4-3】 简单 了 解 一 下 XML 和 JSON 数据 格式 。 


【范例 4-2 最 简单 的 XML 格式 】 


<?xml version="1.0" encoding="UTF-8"?> 
<user> 

<name>z3f</name> 

<homepage>www .2z3f.me</homepage> 
</user> 


必 wN 
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【范例 4-3 最 简单 的 JSON 格式 】 


{"name":"z3f", "homepage":"www.2z3f.me"} 


通过 范例 可 以 看 出 ，JSON 相对 于 XML 而 言 更 小 、 解 析 更 快 ， 如 果 在 Internet 中 传输 会 


更 加 节省 流量 ， 正 由 于 此 ，JSON 才 成 为 一 种 重要 的 、 广 泛 应 用 于 Internet 的 、JavaScript 语 
言 中 的 数据 交换 格式 。 本 书 范例 也 将 大 量 使 用 JSON， 更 为 详细 的 介绍 将 在 后 续 章 节 谈 到 。 





JSON 的 发 明 人 是 前 雅虎 架构 师 道 格拉 斯 。 克 洛克 福特 (Douglas Crockford) 。 他 的 





JSON 让 AJAX 活力 倍增 ， 几 乎 完胜 XML， 由 于 习惯 问题 ，AJAX 中 的 X 依然 是 指 XML， 而 
实际 上 大 多 数 项 目 却 使 用 的 是 JSON。 














JSON 在 网 络 中 传输 时 是 字符 串 形 式 ， 在 JavaScript 中 解析 后 就 是 Object 对 象 ， 即 序列 化 


和 反 序 列 化 。 


4.1.4 AJAX 是 如 何 工作 的 


通过 【范例 4-4】 这 个 小 型 AJAX 应 用 程序 范例 来 快速 理解 AJAX 的 工作 原理 。 布 局 好 


HTML 代码 ， 设 置 一 个 按钮 ， 通 过 按钮 的 click 事件 触发 AJAX 相关 操作 代码 。 在 AJAX 代码 
中 首先 创建 一 个 XMLHttpRequest 对 象 ， 通 过 对 象 的 open 方法 和 send 方法 发 送 GET 请 求 ， 
把 服务 器 发 回 的 结果 替换 为 指定 内 容 。 在 这 里 把 前 面 的 JavaScript 代码 整理 成 独立 的 eg.libjs 
公共 方法 文件 ， 以 便 管理 。 
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【范例 4-4 helloajax】 


<html> 
<head> 
<title>hello ajax</title> 
</head> 
<body> 
<div id="myajax">hello world!</div> 
<button type="button" id="ajaxBtn"> 通 过 AJAX 改变 内 容 </button> 
<script src="eg.lib.js"></script> 
</body> 


</html> 
“ <SCript> 


// 定 义 一 个 公用 的 AJAX 请 求 函数 
eg.AJAX = function (config,callback) { // 接 受 一 个 回调 函数 和 一 个 配置 参数 
var xmlhttp; // 定 义 一 个 变量 用 于 后 面 存储 对 象 
if (window.XMLHttpRequest) { // 如 果 浏 览 器 支持 XMLHttpRequest 对 
象 ， 通常 非 IE 浏览 器 支持 
xmlhttp = new XMLHttpRequest (); 
}else if(window.ActiveXObject){ 
// 如 果 浏 览 器 支持 ActiveXobject 对 象 ， 通 常 是 IE 
try { // 尝 试 创建 一 个 低 版 本 对 象 ，msxml 组 件 2.6 版 本 以 下 支持 
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xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); 
} 
catch (e){ 
try { // 尝 试 创建 一 个 高 版 本 对 象 ，msxml 组 件 3.0 版 本 以 上 支持 
xmlhttp=new ActiveXObject ("msxml2 .XMLHTTP"); 
h 
catch (x){ 
} 
} 
1 
if (xmlhttp) { // 如 果 能 够 创建 成 功 一般 都 会 成 功 ) 
if(config.ISASYN){ 
xmlhttp.onreadystatechange = function(){ 
// 定 义 HTTP 状态 发 生 改变 时 执行 的 函数 
if (xmlhttp.readyState==4 && xmlhttp.status 
==200) { ”// 当 HTTP 请 求 成 功 时 
callback (xmlhttp.responseText, xmlhttp.responseXML); 
// 把 服务 器 响应 的 数据 回 传 给 回调 函数 callback 
} 
}; 
// 将 传递 的 参数 给 open 方法 调用 
xmlhttp.open (config.TYPE, config.URL,true); 
xmlhttp.send (config.DATA) ; // 发 送 异 步 AJAX 请 求 
}else{ 
// 将 传递 的 参数 给 open 方法 调用 
xmlhttp.open (config.TYPE, config.URL, false); 
xmlhttp.send (config.DATA) ; // 发 送 同步 AJAX 请 求 
callback (xmlhttp.responseText, xmlhttp.responseXML); 


3 
(function (){ // 避 免 全 局 污染 , 将 操作 放 在 闭 包 里 
Var ajaxBtn = eg.$ ("ajaxBtn"); 

// 取 得 username 的 DOM 对 象 ，eg.$ 方 法 定义 在 eg.1ib.js， 详 见 第 2 章 中 的 范例 
// 给 userName 对 象 绑 定 一 个 onkeyup 事件 ，eg .addListener 方法 定义 在 eg.1ib. 
js， 详 见 第 2 章 中 的 范例 
eg.addListener (ajaxBtn,"click",function(){ 

eg .AJAX ({TYPE:"GET", //AJAX 请 求 类 型 
URL:"4-4.txt"， //AJAX 请 求 的 URL， 该 文件 只 有 hello ajax 字符 串 的 纯 文本 
ISASYN:true // 是 否 异步 
}， function (data){  ”// 定 义 AJAX 请 求 成 功 后 的 callback 回调 函数 
// 在 元 素 myajax 原本 的 hello world1! 会 变 成 hello ajax 
eg.$ ("myajax") .innerHTML = data; 
1 
Ds; 
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S56 JA 
57. </script> 

将 【范例 4-4】 的 代码 直接 另存 为 html 文件 无 法 直接 运行 ， 需 要 放 在 网 站 下 ， 还 需要 在 
同 目录 下 新 建 一 个 保存 “hello ajax” 字 符 串 的 txt 文 件 ， 可 自 定义 内 容 和 进行 名 字 测 试 ， 在 火 
狐 浏览 嚣 中 的 运行 效果 如 图 4-2 所 示 。 








文件 @) ”编辑 于 ) 查看 W) 大 | 文件 如 ”编辑 EE) 查看 WW) 厌 
[Bho je [Dene jo 

€)310 :Ore OO cl 
hello ajax hello world! 

通过 改变 内 容 通过 AJAX 改变 内 容 





4-2 在 火狐 上 运行 的 效果 


IE 等 浏览 器 也 能 够 执行 【范例 4-4】 中 的 代码 ， 对 于 公共 函数 eg.AJAX， 为 了 便于 
管理 ， 最 好 将 其 移 至 eg.lib.js 中 ， 后 期 直接 引用 eg.lib.js 文件 即 可 ， 而 且 HTML 代码 非 
常 简洁 。 


4.2 XMLHttpRequest 对 象 的 常见 方法 和 属性 


XMLHttpRequest 对 象 提供 了 对 HTTP 协议 的 完全 访问 ， 包 括 做 出 POST 和 HEAD 请 求 
以 及 普通 的 GET 请 求 的 能 力 。XMLHttpRequest 可 以 同步 或 异步 返回 Web 服务 器 的 响应 。 尽 
管 命名 中 有 XML， 但 是 它 并 不 仅 限于 和 XML 文档 一 起 使 用 一 一 它 可 以 接收 任何 形式 的 文本 
文档 。 它 是 AJAX Web 应 用 程序 架构 的 关键 组 成 部 分 。 

简单 地 说 ，AJAX 主要 通过 JavaScript 操作 XMLHttpRequest 对 象 来 向 服务 器 发 异步 请 
求 ， 获 得 服务 器 给 的 数据 后 ， 再 由 JavaScript 根据 获得 的 数据 来 操作 DOM， 从 而 达到 更 新 页 
面 的 目的 ， 如 图 4-3 所 示 。 





更 改 网 页 返回 数据 





[ 浏览 器 事件 上 XMLHttpRequest 服务 端 
4-3 AJAX 流程 


其 中 关键 的 一 步 是 从 服务 器 请 求 并 获得 数据 ， 要 清楚 这 些 就 必须 对 XMLHttpRequest 对 
象 的 常见 方法 和 属性 有 所 了 解 。 
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4.2.1 XMLHttpRequest 对 象 方法 
表 4-1 列 出 了 XMLHttpRequest 最 常见 的 几 个 方法 及 说 明 。 
表 4-1 XMLHttpRequest 对 象 的 常见 方法 
方法 说 明 


规定 请 求 的 类 型 、URL 以 及 是 否 异 步 处 理 请 求 。 
e method: 请 求 的 类 型 ，GET 或 POST 








WP ye 。url 文件 在 服务 器 上 的 位 置 
e@ async: true (异步 ) 或 false (同步 ) 
. 将 请 求 发 送 到 服务 器 。 
send(string) 


e string: 仅 用 于 POST 请 求 
向 请 求 添加 HTTP 头 。 

e header: 规定 头 的 名 称 

e value: 规定 头 的 值 


setRequestHeader(header,value) 











与 POST 相 比 ，GET 更 简单 也 更 快 ， 并 且 在 大 部 分 情况 下 都 能 用 。 然 而 ， 在 以 下 情况 
中 ， 请 使 用 POST 请 求 : 


e 不 能 使 用 缓存 文件 时 (更 新 服务 器 上 的 文件 或 数据 库 ) 。 

日 向 服务 器 发 送 大 量 数据 时 (POST 没有 数据 量 限制 ) 。 

日 发 送 包含 未 知 编码 字符 的 用 户 输入 时 (POST 比 GET 更 稳定 、 更 可 靠 、 更 一 致 ) 。 

【范例 4-4】 中 的 第 50 行 代码 可 能 得 到 的 是 缓存 的 结果 。 为 了 避免 这 种 情况 ， 可 以 给 
URL 添加 一 个 唯一 的 标识 : 

URL:"4-4.txt?t="+Math.random() ， 

其 实 就 是 添加 了 一 个 t 参数 ， 这 个 参数 每 次 都 会 产生 一 个 随机 的 、 不 相同 的 值 ， 且 这 个 
参数 会 被 发 送 给 服务 器 端 并 可 以 被 接收 ， 如 果 要 传递 更 多 信息 ， 还 可 以 添加 更 多 的 参数 ， 

URL:"4-4.txt?t="+Math.random()+"&user=Z3f&homepage=www.Zz3f.me"， 

前 面 说 到 ，POST 更 可 靠 的 原因 就 在 于 GET 通过 这 样 的 方式 传递 信息 的 时 候 有 最 大 长 度 的 
限制 ，IE 9 以 前 的 版 本 最 大 只 能 接受 2083 个 字符 。URL 的 长 度 不 仅 浏 览 器 会 限制 ， 各 种 Web 服 
务 器 也 会 限制 ， 为 了 避免 产生 未 知 的 问题 ， 不 建议 在 URL 中 传递 太 多 数据 ， 尤 其 是 传递 中 文 信 
息 时 ， 通 过 UTF-8 编码 的 中 文 会 占用 9 个 字符 ， 也 就 是 说 最 多 传递 200 个 左右 的 字符 。 

下 面 再 来 看 一 下 POST 请 求 ， 对 【范例 4-4】 中 的 代码 修改 一 下 即 可 运行 : 

eg.AJAX({TYPE:"POST", 


AJAX 模拟 表单 POST 提交 请 求 就 不 用 担心 数据 长 度 的 限制 了 。 但 过 大 的 数据 ， 比 如 超 
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过 几 吉 字 节 的 文件 ， 就 会 导致 浏览 器 卡 死 甚 至 崩 淡 。 

最 后 一 个 参数 是 async， 在 我 们 的 例子 中 总 是 true， 意 思 是 JavaScript 无 须 等 待 服务 器 的 
响应 就 可 以 做 更 多 的 事情 ， 可 通过 下 面 的 【范例 4-5】 来 理解 。 

【范例 4-5 AJAX 同步 请 求 】 





3 <html> 
2 <head> 
3 <title>hello ajax sync</title> 
4. </head> 
5. <body> 
© <div id="myajax">hello world!</div> 
i <button type="button"” id="ajaxBtn"> 通 过 AJAX 同步 改变 内 容 </button> 
8 <script src="eg.lib.js"></script> 
9. </body> 
TL0e </html> 
二 二 <script> 
2 (function() { // 避 免 全 局 污染 ,将 操作 放 在 闭 包 里 
让 var ajaxBtn = eg.$ ("ajaxBtn"); 
// 取 得 username 的 DOM 对 象 ，eg .$ 方 法 定义 在 eg. lib.js 中 ， 详 见 第 2 章 范例 
让 请 // 给 userName 对 象 绑 定 一 个 onkeyup 事件 ，eg.addListener 方法 
定义 在 eg.1lib.js 中 ， 详 见 第 2 章 范例 
5 eg.addListener (ajaxBtn,"click",function(){ 
16. eg .AJAX ({TYPE:"GET", //AJAX 请 求 类 型 
了 3 URL: "4-4.txt",//AJAX 请 求 的 URL， 该 文件 只 有 "hello ajax" 
字符 串 的 纯 文本 
18 . ISASYN: false // 是 否 异步 
19. } ,function (data) {// 定 义 AJAX 请 求 成 功 后 的 callback 回调 函数 
20. // 元 素 myajax 原本 的 hello world1! 会 变 成 hello ajax 
eg.$ ("myajax") .innerHTML = data; 
2315 }) 7 
22。 ]) 7 


235 }) (7 
24. </script> 

通过 观察 【范例 4-4】 第 30~42 行 的 代码 可 以 发 现 ， 同 步 和 异步 相 比 ， 少 了 
onreadystatechange 回调 函数 的 定义 ， 把 主要 操作 代码 直接 移植 到 最 后 ， 这 似乎 更 符合 思维 方 
式 ， 如 果 服 务 端 请 求 要 很 久 才 能 响应 ， 那 么 用 户 的 浏览 器 在 此 就 会 卡 住 一 一 处 于 假死 状 
态 。 这 就 是 AJAX 异步 存在 的 价值 ， 如 果 读 者 是 从 传统 编程 语言 迁移 过 来 的 ， 就 要 改变 一 
下 思维 方式 ，【 范 例 4-5】 这 样 的 同步 调用 方式 不 推荐 在 AJAX 中 使 用 ， 一 些 极端 的 特殊 
情况 除外 。 
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4.2.2 XMLHttpRequest 对 象 属性 


表 4-2 列 出 XMLHttpRequest 比较 重要 的 几 个 属性 及 说 明 ， 值 得 注意 的 是 onreadystatechange 
和 responseText。 


表 4-2 XMLHttpRequest 对 象 的 常见 属性 








属性 说 明 
TesponseText 获得 字符 串 形 式 的 响应 数据 
responseXML 获得 XML 形式 的 响应 数据 








Onreadystatechange 


每 当 readyState 属性 改变 时 ， 就 会 调用 该 函数 

存 有 XMLHttpRequest 的 状态 ， 从 0 到 4 发 生变 化 。 
0: 请 求 未 初始 化 
1: 服务 器 连接 已 建立 








readyState 2: 请 求 已 接收 

3: 请 求 处 理 中 

4: 请 求 已 完成 ， 且 响应 已 就 绪 
本 200: "OK" 
全 404: 未 找到 页 面 


在 程序 中 onreadystatechange 回调 函数 一 般 会 被 触发 4 次 ， 对 应 着 readyState 的 每 个 变 
化 ， 也 正 因 如 此 开发 者 才 可 以 根据 自己 的 需要 对 每 一 个 变化 进行 处 理 。 在 前 面 的 范例 中 都 是 
使 用 responseText 属性 ， 如 果 来 自 服务 器 的 响应 是 XML， 虽然 越 来 越 少 的 Web 应 用 程序 还 在 


使 用 XML 数据 交换 格式 ， 但 如 果 要 用 XML， 就 





要 使 用 responseXML 属性 ， 可 通过 【范例 4- 


6】 来 理解 它 的 用 法 。 
【范例 4-6 AJAX 获取 XML 内 容 】 


<html> 
<head> 
<title>hello ajax xml</title> 
</head> 
<body> 
<div id="myajax">hello world!</div> 
<button type="button" id="ajaxBtn"> 通 过 AJAX 获取 xml 内 容 </button> 
<script src="eg.lib.js"></script> 
</body> 
</html> 
<script> 
(function (){ // 避 免 全 局 污染 , 将 操作 放 在 闭 包 里 
var ajaxBtn = eg.$ ("ajaxBtn");// 取 得 username 的 DOM 对 象 ， 
eg .$ 方 法 定义 在 eg .1ib.js， 详 见 第 2 章 范例 
// 给 userName 对 象 绑 定 一 个 onkeyup 事件 ，eg .addListener 方法 定义 在 
eg.lib.js， 详 见 第 2 章 范例 
eg.addListener (ajaxBtn,"click", function(){ 
eg .AJAX ({TYPE:"GET", //AJAX 请 求 类 型 
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URL:"4-6.xml" ,//AJAX 请 求 的 URL， 该 文件 就 是 范例 4-2 的 代码 
ISASYN:true  // 是 否 异步 
}, function (txt, xml) {// 定 义 AJAX 请 求 成 功 后 的 callback 回调 函数 
Var root = xml .getElementsByTagName ("name"); 
eg.$ ("myajax") .innerHTML = root[0]. 
childNodes[0]. nodeValue; 
1); 
a 
}) ()7 
</script> 


变量 url 请 求 的 文件 4-6.xml 内 容 就 是 【范例 4-2】 的 XML 格式 代码 ， 图 4-4 是 其 运行 


效果 。 
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hello world! 


通过 AJAX 获取 xml 内 容 


4-4 AJAX 获 取 XML 内 容 


如 果 要 达到 相同 效果 ， 使 用 JSON 数据 交换 格式 的 代码 如 【范例 4-7】 所 示 。 
【范例 4-7 AJAX 获取 JSON 内 容 】 


<html> 
<head> 
<title>hello ajax JSON</title> 
</head> 
<body> 
<div id="myajax">hello world!</div> 
<button type="button" id="ajaxBtn"> 通 过 AJAX 获取 JSON 内 容 </button> 
<script src="eg.lib.js"></script> 
</body> 
</html> 
<script> 
(function(){ // 避 免 全 局 污染 ,将 操作 放 在 闭 包 里 
Var ajaxBtn = eg.$ ("ajaxBtn"); 
// 取 得 username 的 DOM 对 象 ，eg .$ 方 法 定义 在 eg .1ib.js， 详 见 第 2 章 范例 
// 给 userName 对 象 绑 定 一 个 onkeyup 事件 ，eg .addListener 方法 定义 
在 eg.1ib.js， 详 见 第 2 章 范例 
eg.addListener (ajaxBtn,"click",function(){ 
eg .AJAX ({TYPE:"GET", //AJAX 请 求 类 型 
URL: "A=7 .txt"y 
//AJAX 请 求 的 URL， 该 文件 就 是 范例 4-3 的 JSON 代码 
ISASYN:true // 是 否 异 步 
}， function (txt,xml) { // 定 义 AJAX 请 求 成 功 后 的 callback 回调 函数 
Var json = new Function("return "+txt) (); 


// 简 单 的 JSON 字符 串 转换 为 avaScript 对 象 
2 eg.$ ("myajax") .innerHTML = json.name;  ”// 输 出 用 户 名 
2 ]}) 7 
23 . Fx 
2 1D) 0; 
2 </script> 


运行 效果 见 图 4-4 右 半 部 分 。 如 果 面 对 更 复杂 的 数据 结构 ， 使 用 JSON 会 体现 出 更 高 的 
效率 ， 编 写 的 代码 也 更 加 容易 和 简洁 。 


4.3 检查 待 注册 的 用 户 名 是 否 存在 


在 使 用 AJAX 提交 数据 给 服务 器 之 前 ， 先 看 看 传统 页 面 的 提交 方式 ， 即 会 刷新 页 面 的 form 
表单 数据 提交 方式 ， 通 过 对 比 来 理解 AJAX 诞生 的 根本 原因 并 体会 它 所 带 来 的 用 户 体验 。 


4.3.1 客户 端 进行 检测 


在 早期 程序 中 ， 很 多 都 是 没有 经 过 AJAX 验证 的 ， 比 如 在 百度 中 用 “inurl:(UserReg. 
asp)” 这 样 的 字符 串 来 进行 搜索 ， 可 以 找到 很 多 没有 使 用 无 刷新 检测 设计 的 网 站 ， 如 图 4-5 所 
示 为 在 百度 上 找到 的 新 用 户 注 册页 面 。 
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痪 认 志 码 (至少 6 位 ) : ES 
请 再 办 一 这 确认 
轩 | 列 








4-5 手动 检测 用 户 名 的 设计 方式 


通过 【范例 48】 和 【范例 4-9】 来 分 析 一 下 这 种 设计 思路 ，【 范 例 4-8】 是 传统 网 页 提 
交 的 HTML 代码 ，【 范 例 4-9】 是 ASP 服务 端 代码 一 一 用 的 也 是 类 JavaScript 的 语法 。 
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范例 4-8 传统 网 页 提交 】 


1. <html> 

县 <head> 

3 <title> 传 统 网 页 提交 </title> 

4. </head> 

5. <body> 

5 <form method="get" action="4-9.asp" target=" blank"> 
i <input type="text" name="username" /> 

8. <input type="submit" value=" 手 动 检查 用 户 名 " /> 
9. </form> 

10. </body> 

11. </html> 


【范例 4-8】form 标签 中 的 target 属性 值 “_blank” 意 思 是 “4-9.asp ”页 面 将 在 新 窗口 打 
开 。 第 7 行 的 input 是 要 输入 用 户 名 的 输入 框 ，name 属性 值 username 是 后 面 【范例 4-9】 服 
务 端 代码 获取 用 户 输入 的 参数 名 。 


4.3.2 服务 器 端 获 取 数 据 


数据 通过 客户 端 浏览 器 发 送 到 Web 服务 端 之 后 ， 需 要 通过 一 系列 的 业务 处 理 ， 最 后 才 会 
返回 处 理 结果 给 客户 端 浏览 器 ，【 范 例 4-9】 就 是 ASP 版 本 的 服务 端 处 理 代码 ，ASP 也 支持 
用 JavaScript 作为 服务 端 编程 代码 而 且 使 用 方便 ， 在 JavaScript 流行 之 前 ，ASP 服务 端 编程 语 
言 通常 是 VBScript 语言 。 

【范例 4-9 传统 地 检测 用 户 名 是 否 注册 (ASP 版 ) 】 


下 <%@language="javascript"%> 

2. <% //<% 是 asp 服务 器 端 运行 代码 的 起 始 符 号 

3. //elanguage="javascript" 表 示 本 页 面 运行 的 服务 器 端 默认 语言 设置 为 JavaScript 
4 


var names = ["z3f","admin","test","anna","cindy", "diana"]; // 定 义 一 个 数组 
模拟 数据 表示 已 经 注册 过 的 用 户 
5. // 获 取 网 址 传递 过 来 的 参数 username， 在 JavaScript 语法 中 是 区 分 大 小 写 的 
6. var q = Request.OueryString("username");  // 通 过 ASP 内 置 对 象 获取 数据 
7. var has = 0 // 定 义 一 个 变量 用 来 存储 是 否 有 输入 的 用 户 名 
8. for (var i=0;i<names.length;i++){  // 循 环比 对 ， 一般 项 目 中 是 查询 数据 库 操作 
9, if (names [i]==q ){ // 如 果 用 户 名 已 存在 就 标记 
LOR has = 1; // 保 存 起 来 
1 break; // 退 出 循环 
诗人。 } 
3 


14. if(has == 1){ 

15. Response.Write (q+" 已 注册 ， 请 换 其 他 用 户 名 ! ") ; // 如 果 找 到 同名 用 户 则 不 能 注册 ， 并 通过 ASP 
内 置 对 象 输出 

16. J}else{ 


17。. Response.Write (q+" 还 没有 注册 ， 恭 喜 你 ! ") ; // 如 果 没 有 同名 用 户 则 可 以 注册 ， 并 通过 
ASP 内 置 对 象 输出 
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19. %> 


【范例 4-8】 和 【范例 4-9】 在 本 地 Web 服务 器 下 运行 ， 单 击 “ 手 动 检查 用 户 名 ”会 弹出 
新 窗口 ， 如 图 4-6 所 示 ， 部 分 浏览 器 会 弹出 新 的 标签 页 ， 效 果 相 同 。 
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4-6 手动 检查 用 户 名 


这 就 是 一 个 改进 版 的 传统 检查 用 户 名 是 否 注册 的 程序 ， 相 对 于 56k 拨号 上 网 的 时 代 而 
言 ， 这 是 相当 流行 的 设计 ， 因 为 它 可 以 手动 传输 一 部 分 很 少 的 关键 数据 给 服务 嚣 检查， 检查 
通过 后 服务 端 也 返回 极其 简单 的 提示 ， 大 大 减少 了 整 页 整 页 提交 的 漫长 等 待 时 间 和 流量 。 

时 代 的 发 展 ， 科 技 的 进步 ， 人 们 生活 质量 的 不 断 提 高 ， 对 于 各 方面 的 感受 要 求 就 越发 不 
满足 于 以 前 这 种 “手动 模式 ”“ 弹 窗 模式 ”， 于 是 在 这 种 需求 下 推动 了 AJAX 的 萌芽 。 


4.4 用 AJAX 提交 数据 给 服务 器 


为 改善 用 户 体验 ， 本 书 用 实例 代码 讲述 AJAX 应 用 程序 的 基本 核心 ， 范 例 基 于 前 面 的 思 
路 ， 但 是 由 于 设计 思想 不 同 ， 使 用 技术 不 同 ， 还 是 稍 有 改变 。 


4.4.1 客户 端 部 分 


考虑 到 用 户 一 边 输入 ， 一 边 验证 ， 当 用 户 输入 完毕 也 就 验证 完毕 ， 这 是 多 么 令 人 愉快 的 
事情 一 一 大 大 节省 了 用 户 时 间 。 要 做 到 这 样 ， 就 需要 在 键盘 事件 上 做 一 些 处 理 ， 来 看 【范例 
4-10】 的 代码 。 
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范例 4-10 AJAX 检测 用 户 名 】 


<html> 
<head> 
<title>AJAX 检查 用 户 名 </title> 
</head> 
<body> 
用 户 名 : <input type="text"id="username" /><span id="usernameTip"></span> 
<script src="eg.1lib.js"></script> 
</body> 
</html> 
<script> 
//eg 对 象 已 经 在 eg.1ib.js 中 定义 
(function() { // 避 免 全 局 污染 , 将 操作 放 在 闭 包 里 
Var userName = eg.$ ("username"); 
// 取 得 username 的 DOM 对 象 ，eg .$ 方 法 定义 在 eg .1ib.js 中 ， 详 见 第 2 章 的 范例 
var delay;// 存 储 延 迟 执行 的 函数 
var delay2ajax = function() {//AJAX 操作 部 分 
eg .AJAX ({TYPE:"GET", //AJAX 请 求 类 型 
URL:"4-11.asp?username="+userName.value, 
// 获 取 用 户 输入 的 值 并 构建 AJAX 请 求 的 URL 
ISASYN:true  // 是 否 异步 
},function (data) { ”// 定 义 AJAX 请 求 成 功 后 的 callback 回调 函数 
var json = new Function("return "+data) (); 

// 使 用 简单 的 方式 把 JSON 格式 的 字符 串 文本 转换 成 JavaScript 对 象 
var tip = ""; // 存 储 提示 信息 
if(json.success){ ， // 根 据 服务 端 定义 的 成 功 标志 判断 

tip = "VY 该 用 户 名 可 以 注册 "; 
}else{ 
tip = "x 该 用 户 名 已 存在 "; 
} 
eg.$ ("usernameTip") .innerHTML = tip; 
// 在 输入 框 旁边 的 标签 输出 服务 端 返 回 的 信息 
Ps 
] 
eg.addListener (userName, "keyup", function(){ 
// 给 userName 对 象 绑 定 一 个 onkeyup 事件 ，eg .addListener 方法 定义 在 
eg.1ib.js 中 ， 详 见 第 2 章 的 范例 
clearTimeout (delay) 
// 如 果 用 户 在 短 时 间 内 还 输入 ， 则 清除 要 AJAX 的 操作 
delay = setTimeout (delay2ajax, 800); 
// 重 新 等 待 用 户 输入 ， 如 果 延 迟 了 0. 8 秒 都 还 没有 输入 ， 则 认为 可 以 自动 发 起 AJAX 检查 
| 于 
Wy 
</script> 


【范例 4-10】 运 行 之 后 如 图 4-7 所 示 ， 通 过 AJAX 改造 后 ， 少 了 一 个 按钮 ， 有 更 多 的 空 
间 显示 更 多 的 内 容 ， 用 户 也 有 更 多 的 时 间 做 更 多 的 事情 ， 用 更 少 的 操作 达到 相同 的 目的 。 
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文件 下 编辑 四 查看 W) 历史 G) 书签 如。 工具 四 ”帮助 如 














| 吕 ATAx 检查 用 户 名 本 

二]@locubost/04/4-i0 nt 售 国 ”CI 图 - EE 月 合 才 忆 
用 户 名 ,abe ~ 该 用 户 名 可 以 注册 
| ds- Jam Jey 


| 清除 保持 概况 | 所 有 错 误 警告 消息 调试 信息 
5 GET http:/ /localhost/04/4-11.asprusermame=z3f > eg. lib js (第 57 行 ) 2| 
雳 数 、 夭 信息 “而 库 ”HTML JSON Cookies 





3 GET http:/ /localhost/04/4-11.asp?username=abc 3 eg lib js (第 57 行 ) 
志 数 ” 头 信 息 ” 驹 库 HTML JSON Cookies 


sucess trus 可 
日 >>> 目 


图 4-7 AJAX 自动 检查 用 户 名 
图 4-7 下 方 是 Firebug 工具 ， 可 以 看 到 有 两 次 输入 ， 请 求 路 径 和 参数 不 同 ， 返 回 结果 也 是 
不 同 的 。 

















4.4.2 服务 端 部 分 
【范例 4-10】 提 交 到 服务 端 要 做 的 处 理 请 看 代码 【范例 4-11】。 
【范例 4-11 AJAX 检测 用 户 名 是 否 注册 (ASP 版 ) 】 


1 <%@language="javascript"%> 
2 <% //<s 是 ASP 服务 器 端 运行 代码 的 起 始 符号 
六 //elanguage="javascript" 表 示 本 页 面 运行 的 服务 器 端 默认 语言 设置 为 JavaScript 
4 Var names = ["z3f","admin","test","anna","cindy", "diana"]; 
// 定 义 一 个 数组 模拟 数据 表示 已 经 注册 过 的 用 户 
5 // 获 取 网 址 传递 过 来 的 参数 username， 在 JavaScript 语法 中 是 区 分 大 小 写 的 
5 var q = Request.QueryString ("username");// 通 过 ASP 内 置 对 象 获取 数据 
了 7 到 var has = 0 // 定 义 一 个 变量 ， 用 来 存储 是 否 有 输入 的 用 户 名 
8 for (var i=0;i<names.length;i++){ // 循 环比 对 ， 一 般 项 目 中 是 查询 数据 库 操作 
9 if (names [i]==q ){ // 如 果 用 户 名 已 存在 就 标记 
于 05 has = 1; // 保 存 起 来 
人 break; // 退 出 循环 
25 } 
和 } 
4 if(has = 1){ 
15. Response.Write("{success:false}"); 


// 如 果 找到 同名 用 户 则 不 能 注册 ， 构 造成 JSON 格式 字符 串 并 通过 ASP 内 置 对 象 输出 
os }else{ 
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i Response.Write("{success:true}"); 


// 如 果 没 有 同名 用 户 则 可 以 注册 ， 构 造成 JSON 格式 字符 串 并 通过 ASP 内 置 对 象 输出 


对 比 【 范 例 4-11】 和 【范例 4-9】 可 以 发 现 ， 服 务 端 的 代码 其 实在 非 AJAX 模式 和 AJAX 
模式 下 相差 不 是 很 大 ，AJAX 在 前 端 工作 中 越 来 越 重要 的 原因 就 是 它 改 变 了 前 端的 方式 ， 但 
是 对 后 端的 改变 不 是 很 大 。 


| 本 章 范例 用 到 的 Web 服务 器 名 叫 Netbox ( 大 小 为 620KB ) ， 是 一 款 旨 在 代替 IIS 的 国 
EE 辐 产 软 件 ， 安 装 很 简单 ， 一 直 单 击 Next 按钮 即 可 使 用 。 


4.5 相关 参考 


e JSON 中 文 介绍 一 一 http://www.json.org/json-zh.html。 
ee Internet Explorer 中 最 大 的 URL 长 度 一 一 https://support.microsoft.com/kb/q208427。 
e Netbox 官网 下 载 一 一 http://www.netbox.cn/download/index.htm 。 


68 


第 5 全 瀑布 流 布局 


日 照 香 炉 生 紫 烟 ， 关 看 瀑布 挂 前 川 。 飞 流 直 下 三 千 尺 ， 疑 是 银河 落 九 天 。 
一 一 唐 代 。 诗 仙 ，。 李 白 


滥 布 是 自然 界 最 壮观 的 美景 之 一 ， 所 谓 技术 或 者 艺术 都 源 于 生活 或 者 大 自然 ， 比 如 雷达 
模仿 的 是 蝙蝠、 声呐 模仿 海 且 ， 诸 如 此 类 ， 而 在 IT 界 ， 瀑 布 流 布局 是 一 个 最 为 成 功 和 著名 的 
模仿 自然 的 技术 。 本 章 就 将 介绍 这 个 瀑布 流 布局 。 

本 章 主要 知识 点 : 

。 浮动 深 布 流 

。 定位 瀑布 流 


5.1 瀑布 流 简 介 


最 早 采 用 瀑布 流 布局 的 网 站 是 pinterest.com。pinterest (中文 名 : 品 趣 志 ) 是 全 球 最 大 的 
图 片 社交 分 享 网 站 ， 采 用 瀑布 流 的 形式 展现 图 片 内 容 ， 无 须 用 户 翻 页 ， 新 的 图 片 不 断 自动 加 
载 在 页 面 底 端 ， 让 用 户 不 断 发 现 新 的 图 片 ， 良 好 的 用 户 体验 让 它 跻身 全 球 社交 网 站 前 十 ， 因 
此 瀑布 流 布局 得 以 被 更 多 网 站 采用 ， 成 为 新 兴 网 站 的 首选 。 


5.1.1 瀑布 流 是 不 是 万 金 油 


国人 自古 就 喜欢 百宝箱 之 类 的 东西 ， 现 在 这 个 概念 被 搬 到 网 络 上 了 ， 大 全 、 集 合 、 万 能 
等 常常 现 于 眼帘 ， 那 么 瀑布 流 是 不 是 也 是 一 种 万 能 法 宝 呢 ? 

在 “瀑布 流 ” 网 站 布局 被 发 明 出 来 之 后 ， 这 一 亮 睹 用 户 眼 球 的 设计 ， 在 “以 快 致胜 ” 思 
想 泛滥 的 年 代 很 快 传 开 来 ， 铺 天 盖 地 都 是 瀑布 流 ， 哪 里 都 看 得 见 。 无 论 是 新 建 的 还 是 重 构 
的 ， 都 以 李白 的 瀑布 挂 前 川 ， 谁 的 网 站 要 不 挂 点 瀑布 都 不 好 意思 见 人 ， 更 有 甚 者， 不 让 人 滚 
到 手 抽筋 丝毫 没有 罢休 的 意思 ， 真 是 应 了 那 名 话 一 一 数据 不 止 ， 折 腾 不 休 。 可 是 ， 成 功 不 是 
人 人 可 以 复制 的 。 仅 赁 一 个 “瀑布 流 ” 真 的 就 能 让 你 的 网 站 “ 永 垂 ”不 朽 吗 ? 

“瀑布 流 ” 布 局 方式 通过 JavaScript 编写 的 插件 密集 、 美 观 地 展示 了 大 量 高 度 不 一 的 缩 略 





图 ， 从 而 为 用 户 提供 完美 的 视觉 体验 。 这 种 不 平衡 和 不 对 称 的 布局 方式 对 于 那些 以 新 闻 聚 合 
以 及 大 量 文本 为 主要 设计 方向 的 网 站 并 不 适合 ， 比 如 Digg (如 图 5-1 所 示 ) 。 














图 5-1 曾 一 度 辉煌 的 Digg 


作为 一 个 新 闻 文章 网 站 ， 通 常 都 是 对 网 站 整体 布局 密度 进行 优化 ， 从 而 突出 新 闻 标 题 以 
增强 可 读 性 。 改 版 后 的 Digg 过 分 强调 视觉 效果 ， 对 新 闻 内 容 大 打折 扣 。 而 且 ， 网 站 上 的 配 图 
也 谈 不 上 特别 美观 ， 反 倒 显 得 有 些 杂乱 。Digg 改版 后 的 Alexa 排名 也 说 明 用 户 对 它 的 新 设计 
并 不 买账 ， 曾 经 一 度 辉 煌 到 2 亿美 元 身价 的 Digg， 如 今 已 跌 至 千 万 级 别 ， 这 不 得 不 令 人 深 
思 一 一 再 炫 、 再 流行 的 技术 都 不 是 重点 ， 重 点 是 如 何 服务 用 户 。 

从 别人 的 成 功 可 以 迅速 获得 灵感 ， 但 也 很 容易 忽略 自己 的 设计 重点 。 在 打算 采用 “瀑布 
流 ” 布 局 之 前 不 妨 问 问 自己 下 面 儿 个 问题 : 

你 的 网 站 内 容 是 以 视觉 为 主 吗 ? 

如 果 是 ， 网 站 上 的 图 片 是 否 大 小 不 一 且 足 够 有 趣 并 吸引 眼球 ? 
你 ， 是 另 一 个 pinterest 吗 ? 

盲目 跟风 的 项 目 会 成 功 吗 ? 


5.1.2 穿 过 瀑布 流 看 水 帘 洞 
-种 东西 流行 于 世 ， 必 定 有 其 优点 ， 而 任何 东西 都 不 可 能 绝对 完美 无 瑕 ， 必 然 有 其 缺 
点 只 是 有 的 ig 下 面 以 这 种 辨证 的 眼光 来 看 看 瀑布 流 的 优点 和 缺点 。 


e 相对 于 它 出 现 以 前 ， 是 一 个 创意 的 网 页 设计 配合 上 独特 的 数据 呈现 方式 ; 
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e@ 从 本 质 上 来 看 它 优化 了 翻 页 和 等 待 翻 页 这 种 最 常见 的 用 户 操 作 体验 ; 
@ 它 适 应 了 让 扩 生生 于 凡生 村 对 相 二 杭 。 


瀑布 流 的 不 足 之 处 在 于 : 
® 它 仅 仅 是 整个 Web 项 目 中 的 一 部 分 ， 无 法 代替 整个 网 站 ; 


总 
® 它 只 是 内 容 的 一 种 组 织 方式 ， 绝 对 不 是 唯一 的 组 织 方式 ; 
日 它 容 易 造 成 “无 限 拖 ”和 “无 底 洞 ” 的 不 良 后 果 ， 也 就 是 说 就 像 用 户 面 对 中 国 股市 一 
样 一 一 很 难 见 底 。 


从 好 的 方面 来 看 ， 它 所 带 来 的 交互 便捷 性 可 以 使 用 户 将 注意 力 更 多 地 集中 在 内 容 而 不 是 
操作 上 ， 从 而 让 他 们 更 乐于 沉浸 在 探索 与 浏览 内 容 当 中 。 

从 它 不 足 的 地 方 来 思考 ， 有 些 行业 或 项 目 应 当 避 免 ， 从 头 望 不 见 底 ， 无 穷 无 尽 地 拖 电 操 
作 一 一 因为 有 些 时 候 用 户 不 可 能 永远 看 你 的 瀑布 ， 最 多 几 页 就 需要 点 击 查 看 详情 。 例 如 ， 在 电 
商 网 站 当中 ， 用 户 时 常 需要 在 商品 列表 与 详情 页 面 之 间 切 换 ， 这 种 情况 下 ， 传 统 的 、 带 有 页 码 
导航 的 方式 可 以 帮助 用 户 更 稳妥 和 准确 地 回 到 某 个 特定 的 列表 页 面 当 中 。 另 外 需要 考虑 页 脚 对 
于 你 的 网 站 ， 特 别 是 用 户 的 重要 性 。 如 果 页 脚 中 确实 有 比较 重要 的 内 容 或 链接 ， 比 如 最 常见 的 
“联系 我 们 ”“ 关 于 我 们 ”等 信息 ， 那 么 最 好 换 一 种 更 传统 和 稳妥 的 浏览 方式 。 

下 面 来 看 看 几 个 对 瀑布 流 应 用 处 理 得 比较 好 的 案例 一 一 Twitter 和 Tumblr。 

2006 年 ， 博 客 技术 先驱 bloggercom 创始 人 埃 文 。 威 廉 姆 斯 (Evan Williams) 创建 的 新 
兴 公 司 Obvious 推出 了 Twitter 服务 。Twitter 适合 采用 无 限 滚动 加 载 的 一 个 重要 原因 ， 就 是 每 
个 内 容 单元 都 短小 精炼 ， 其 本 身 就 是 内 容 整体 ， 用 户 不 需要 在 “列表 索引 ”与 “内 容 详 情 ” 
之 间 切 换 就 可 以 获取 全 部 信息 ， 而 且 当 鼠 标 悬 停 在 某 个 内 容 条 目 范围 内 的 时 候 ， 对 应 的 操作 
(回复 、 删 除 、 收 藏 等 ) 就 会 呈现 ， 所 有 内 容 与 功能 全 部 集中 在 当前 的 上 下 文 环境 中 ， 如 图 
5-2 所 示 。 





从 由 广西 间 Taer 的 所 有 9。 二 /人 作 忆 二 全 10990916 盏 9.com 
人 





图 5-2 Twitter 推 文 的 无 限 滚动 
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Tumblr (中 文 名 : 汤 博 乐 ) 成 立 于 2007 年 ， 是 目前 全 球 最 大 的 轻 博客 网 站 ， 也 是 轻 博客 
网 站 的 始祖 。 默 认 情 况 下 ，Tumblr 是 通过 无 限 滚动 的 方式 加 载 内 容 的 ， 但 在 设置 当中 为 用 户 
提供 了 禁用 无 限 滚动 的 选项 ， 这 种 做 法 非常 体贴 ， 如 图 5-3 所 示 。 














图 5-3 Tumblr 首 页 及 是 否 关 闭 瀑布 流 的 无 限 滚动 设置 


通过 瀑布 流 我 们 需要 挖掘 出 更 大 的 财富 一 一 洞天 福地 般 的 水 帘 洞 ， 如 果 你 的 瀑布 流 背 后 
只 是 给 游客 一 面 光 秃 秃 的 墙 ， 游 客 迟 早 都 会 看 腻 或 者 因 碰 壁 而 离开 ， 而 不 会 成 为 花 果 山 。 





5.2 固定 列 宽 的 简单 瀑布 流 实 现 


虽然 瀑布 流 有 好 有 坏 ， 但 是 这 个 极 具 创意 的 网 页 交互 设计 ， 其 核心 技术 值得 去 探索 一 
番 ， 瀑 布 流 经 过 一 段 时 间 的 改良 出 现 了 不 同 款式 ， 但 基本 来 说 分 为 固定 和 不 固定 的 ， 很 简 
单 ， 固 定 的 尺寸 在 程序 处 理 和 维护 方面 相对 比较 容易 ， 而 不 固定 的 则 要 兼容 许多 东西 ， 先 来 
看 看 一 个 简单 的 固定 列 宽 瀑布 流 如 何 实现 。 
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5.2.1 简单 的 HTML 结构 


相信 很 多 人 都 会 去 得 淘宝 ， 淘 宝 有 很 多 子 站 都 采用 过 瀑布 流 。 通 过 图 5-4 来 看 下 “淘宝 
哇 哦 ”的 瀑布 流 结构 。 


) 哇 吻 - 淘 宝 网 -orills Firefox 





文件 中。 名 名 吕 ”查看 WW 历史 G@) 书签 @ 工具 四 帮助 0 
| 加 中 -将 网 加 


\A ETT ta?spmr= :RFsCMsqusr 合葬 CC 有 图 - 百度 月 时 会 














图 5-4 “淘宝 哇 哦 ”的 固定 列 宽 瀑布 流 布局 


“ 哇 哦 ”采用 的 是 固定 列 宽 模式 ， 共 分 为 4 列 ， 以 result-col 为 class 名 ， 外 层 套 了 











个 


class 名 为 result-box 的 div 控制 整个 瀑布 居中 显示 ， 并 且 限 制 宽度 ， 不 会 因为 窗口 的 大 小 变化 


笔者 也 以 此 为 思路 ， 构 造 了 【范例 5-1】 这 样 的 瀑布 流 HTML 结构 。 
【范例 5-1 简单 的 HTML 结构 】 


1。 <!DOCTYPE html> 

2. <html> 

3。 <head> 

4. <title> 简 单 固定 列 宽 瀑布 流 </title> 

i <link rel="stylesheet" href="eg5.css" /> 

6。 </head> 

Ms <body> 

8. <div class="main"> 

9 <div class="col"><img src="1.jpg" alt="" /><p>[1.jpg]</p></div> 
10. <div class="col"><img src="2.jpg" alt="" /><p>[2.jpg]</p></div> 
5 <div class="col"><img src="3.jpg" alt="" /><p>[3.jpg]</p></div> 
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2 <div class="col"><img src="4.jpg" alt="" /><p>[4.jpg]</p></div> 
2 </div> 

4 <script src="base.js"></script> 

5 <script src="eg5.js"></script> 

16. </body> 

17. </html> 


根据 实际 情况 ， 通 常 后 端 会 生成 第 一 批 默 认 数据 ， 而 不 是 让 JavaScript 来 构造 ， 所 以 
eg5.css 是 一 个 简要 的 样式 文件 ，body 里 只 留 了 一 个 class 名 为 main 的 div， 第 一 批 数据 就 是 
每 列 先 显示 第 一 行 数据 ，base.js 通过 前 面 几 音节 积累 下 来 的 公共 代码 放置 其 中 ，eg5.js 是 本 章 
范例 必要 的 代码 。 


5.2.2 让 瀑布 流动 起 来 


打 好 基建 之 后 ， 就 需要 编写 JavaScript 代码 了 。 首 先 如 果 数据 不 够 显示 一 屏 ， 就 用 新 数 
据 来 补足 它 ， 在 补充 的 时 候 是 根据 4 列 中 最 矮 的 那 一 个 为 优先 补充 ， 因 为 高 矮 尺 寸 一 般 只 有 
在 客户 端 才 看 得 到 ， 服 务 端 虽然 也 可 以 计算 ， 但 是 会 浪费 资源 ， 客 户 端的 内 存 和 CPU 能 用 则 
多 用 ， 只 要 不 让 客户 端 变 慢 就 行 。 

只 要 图 片 高 度 不 一 致 ， 通 过 这 样 的 思路 很 快 就 可 以 看 到 一 个 “瀑布 流 ”， 这 仅仅 是 静态 
的 ， 一 般 滚动 的 时 候 党 布 流 都 会 添加 数据 ， 所 以 接 下 来 就 是 添加 滚动 事件 ， 只 要 有 滚动 就 计 
算 ， 然 后 补充 数据 。 

先 看 图 5-5 的 效果 。 

















图 5-5 固定 列 宽 瀑 布 流 
在 网 上 收集 了 一 些 固定 宽度 不 固定 高 度 的 图 片 ， 简 单 设置 了 一 下 页 面 的 样式 ， 在 实际 项 











目 中 ， 外 观 样式 设置 可 能 更 复杂 一 些 ， 本 书 奸 
码 ， 如 【范例 5-2】 所 示 。 


研讨 JavaScript， 所 以 还 是 先 看 看 其 实现 代 


74 


【范例 5-2 固定 列 宽 瀑布 流 实现 】 


1. eg.getDataList = function(min,max){ 
// 模 拟 构造 数据 ， 实 际 上 这 些 数 据 由 后 端 提供 
2 var lst = [],n=8; // 保 存 数据 
于 for (var i=0;i<n;i++){ // 每 次 模拟 n 条 
人 var k = min + parseInt (Math.random()* (max-min) ) ;// 随 机 指定 范围 的 数 
5 lst .push (k+" .jpg"); // 拼 接 成 字符 串 
65 } 
i return 1st;// 返 回 数组 
Boy 
9. eg.cols = eg.getElementsByClassName ("col");// 把 目标 对 象 缓存 起 来 
10. eg.colh = [0,0,0,0]; // 存 取 每 列 的 高 度 
11. eg.getColMin = function(){ // 计 算 4 列 高 度 
2 var min = 0,m = {}; 
1 江 卫 forl(var i=0;i<4;i++){ 
14. min = parseInt (eg.cols[i] .offsetHeight); 
5 eg.colh[i] = min; 
65< m[min] = i; 
Pie } 
18 . return eg.cols[m[Math.min.apply (Array,eg.colh)]110]; // 返 回 最 小 高 度 的 对 象 
1 
20. eg.add = function(d1) { // 追 加 数据 的 方法 
-人 for(var i in dl){ 
2 Var newDiv = document .createElement("div") 
县 35 Var newImg = document .createElement ("img"); 
24. newImg.src = dl[il]; 
25: newDiv.appendChild (newImg) 
26% newDiv.innerHTML += '<p>['+d1[i]+']</p>'; 
2 eg.getColMin() .appendchild (newDiv) ;// 追 加 到 最 小 高 度 列 里 
2 
2 
30. eg.scroll = function(){// 滚 动 条 事件 处 理 
Di window.onscroll = function() {//onscroll,onload,onresize 只 能 这 样 添加 
32， var doc = document; 
335 var top = doc.documentElement.scrollTop || doc.body.scrollTop; 
// 滚 动 条 到 项 部 的 高 度 
34 var winH=doc.documentElement .clientHeight||doc.body.clientHeight; 
// 可 视窗 口 的 高 度 
上 请 if(Math.min.apply (Array,eg.colh) < topt+winH){ 
// 如 果 最 小 高 度 小 于 可 视 区 域 ， 就 补充 
二 65 eg.add (eg.getDataList (1,35)); // 随 机 获取 数据 ， 并 追加 到 最 后 
37s F 
38。 } 
392 本 
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上 面 代码 中 的 eg.getElementsByClassName() 方 法 是 之 前 定义 过 的 一 个 方法 ， 存 放 在 
basejs 文件 中 ， 通 过 【范例 5-1】 可 知 ， 默 认 数 据 很 少 ， 需 要 在 初始 化 的 时 候补 充 一 些 ， 这 就 
要 在 HTML 页 面 增加 一 个 script 标签 ， 先 调用 eg.getColMin() 获 取 已 经 存在 的 数据 高 度 并 保存 
到 eg.colh 数组 中 以 便 后 面 判断 使 用 ， 然 后 调用 eg.getDataList() 方 法 模拟 一 批 数据 ， 正 规 项 目 


中 会 用 AJAX 去 服务 端 请 求 ， 然 后 把 数据 用 eg.add() 方 法 追加 到 后 面 。 最 后 还 要 调用 
eg.scroll() 方 法 绑 定 滚动 条 事件 的 监听 ， 加 入 代码 是 这 样 的 : 
<Script> 
eg.getColMin() // 计 算 第 一 批 数据 的 高 度 
var dl = eg.getDataList (5,35); // 初 始 化 一 些 数 据 
eg.add (dl1); // 补 充 剩 下 的 数据 
eg.scroll1() // 启 动 滚动 条 监听 
</script> 


| 细 由 于 真实 项 目 中 ，window.onscroll 事件 可 能 会 绑 定 多 个 业务 ， 所 以 本 例 中 的 直接 覆盖 
EU 绑 定 方式 不 宜 直接 拉 入 项 目 中 去 ， 要 确保 没有 其 他 业务 占用 的 情况 下 方 可 如 此 ， 否 则 
可 能 会 出 现 一 些 意外 情况 ， 比 如 无 法 执行 、 某 些 事件 被 覆盖 等 。 


图 片 和 文件 放置 在 同一 个 目录 ， 和 否则 请 修改 相应 的 路 径 。 当 用 鼠标 怎么 也 滚 不 到 底 的 时 
候 ， 菇 喜 你 已 实现 了 经 典 的 固定 列 宽 瀑 布 流 ! 


5.3 非 固定 列 宽 的 复杂 瀑布 流 


虽然 从 直观 感觉 来 说 非 固定 列 宽 的 瀑布 流 算 不 上 用 户 习 惯 意义 上 的 瀑布 流 ， 但 是 也 有 值 
得 研究 和 使 用 的 地 方 。 


5.3.1 非 国定 列 宽 瀑 布 流 的 争议 


知 乎 是 一 个 高 品质 的 真实 网 络 问答 社区 ， 上 面 有 一 些 对 瀑布 流 颇 有 见解 的 分 析 和 观点 。 
下 面 摘录 一 些 有 关 固 定 列 宽 的 观点 ， 以 供 大 家 了 解 。 


@ 知 乎 用 户 zhaosj 说 : “瀑布 流 实际 上 很 吃 硬件 ， 翻 页 我 曾经 翻 到 过 一 百 页 开外 ， 能 想 
象 一 百 多 页 的 内 容 用 瀑布 流 全 都 显示 在 一 个 页 面 里 是 个 什么 情形 么 ? ” 

e@ 知 乎 用 户 Kavin Han 说 : “页 面 上 的 元 素 会 越 来 越 多 ， 导 致 出 现 性 能 问题 (也 就 是 说 
加 载 多 了 会 卡 ) 。 所 以 ， 在 考虑 用 户 体验 的 同时 怎么 控制 已 经 看 完 的 元 素 和 怎么 加 载 
新 元 素 是 个 问题 。” 
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非 固定 列 宽 瀑 布 流 当然 也 是 瀑布 流 ， 对 于 固定 列 宽 瀑布 流 存在 的 问题 同样 也 是 存在 的 ， 
以 下 是 关于 非 固 定 列 宽 的 观点 。 

® 知 乎 用 户 “ 地 球 人 ”说 : “这 ( 指 非 国定 列 宽 瀑布 流 ) 还 叫 “瀑布 流 ? 这 就 是 个 大 
杂烩 ! “瀑布 流 ' 布局 必须 是 宽 固 定 、 间 阶 固 定 、 列 数 固定 的 ， 不 满足 以 上 几 项 ， 就 
不 叫 ‘瀑布 流 ” ! ” 

@ 知 乎 用 户 Sapjax 说 : “ 宽 高 不 定 的 话 ， 答 案 是 无 解 ， 不 管 怎么 排列 ， 都 会 有 无 法 消除 
的 多 块 空隙。” 

@ 知 乎 用 户 薛 滨 说 : “如 果 能 控制 每 个 碎片 的 图 片 高 度 和 文字 长 度 ， 理 论 上 是 有 办 法 解 
决 的 ， 不 过 这 也 就 不 算 瀑 布 流 了 。 瀑 布 流 里 的 内 容 如 果 是 静态 的 ， 单 独 写 css 吧 ! 如 
果 是 动态 的 ， 要 么 选择 上 面 的 方案 ( 指 Masonry，jQuery 的 非 固 定 和 固定 列 宽 瀑布 流 
插件 ) ， 要 么 改 设计 ! ” 





不 固定 列 宽 的 效果 通常 如 图 5-6 所 示 ， 它 有 点 像 CSS 雪碧 图 (CSS Sprites) ， 其 算法 也 
类 似 ， 它 的 难点 在 于 空白 和 位 置 的 计算 ， 这 当然 是 相当 消耗 内 存 和 CPU 的 ， 在 老 版 本 正 浏 
览 器 下 其 性 能 更 加 不 敢 恭维 。 





图 5-6 不 固定 列 宽 瀑布 流 效果 图 


这 样 的 效果 可 以 说 没有 什么 美感 ， 就 实战 项 目 而 言 ， 恶 怕 需 要 在 设计 上 做 一 些 配 合 或 者 
妥协 ， 否 则 把 这 样 的 东西 丢 给 用 户 恐 怕 没 有 什么 意义 。 


5.3.2 用 Masonry 实现 任意 非 固 定 列 宽 瀑布 流 

对 于 非 固定 列 宽 瀑布 流 项 目 ，Masonry 是 目前 业界 最 完美 的 解决 方案 ， 上 手 容易 且 效 果 
精美 。 下 面 就 用 Masonry 来 制作 一 个 复杂 的 非 固定 列 宽 的 瀑布 流 布局 页 面 。 

(1) 先 去 官网 https://masonry.desandro.com 下 载 该 插件 并 在 页 面 引用 。 

<script src="yourpath/masonry.pkgd.js"></script> 

(2) 构建 如 【范例 5-3】 所 示 的 HTML 结构 。 

(3) 在 页 面 最 后 加 入 下 面 的 代码 就 可 以 初始 化 masonry 了 。 


<script> 
Var $container = document .getElementById ("container"); 





a 


Var msnry = new Masonry( $container, { 
columnWidth: 250, // 每 一 列 的 宽度 
itemSelector: ' .box' // 子 元 素 的 选择 器 ， 是 class 的 值 

i 

</script> 


范例 5-3 非 固 定 列 宽 瀑布 流 的 HTML 代码 结构 】 








1. <!DOCTYPE html> 

2. <html> 

3. <head> 

4. <title> 非 固定 列 宽 瀑布 流 </title> 

5. <style>.box{margin:3px;}</style> 

6. </head> 

7. <body> 

8. <div class="w1000"> 

9 <div id="container"> 

ID <div class="box"><img src="lxla.jpg" /></div> 
本 <div class="box"><img src="1lxlb.jpg" /></div> 
LE <div class="box"><img src="1lx3.jpg" /></div> 
3 <div class="box"><img src="2xlb.jpg" /></div> 
14. <div class="box"><img src="lxlc.jpg" /></div> 
5 <div class="box"><img src="lxld.jpg" /></div> 
Ee <div class="box"><img src="2xlc.jpg" /></div> 
Es <div class="box"><img src="lxle.jpg" /></div> 
18 . <div class="box"><img sr 1x1f.jpg"” /></div> 
ES <div class="box"><img src="2xld.jpg" /></div> 
20. </div> 

2 x/diw> 

22. </body> 

23. </html> 


为 了 实际 效果 ，【 范 例 5-3】 代 码 中 那些 img 图 片 尺寸 也 不 是 完全 任意 的 ， 它 们 是 成 比 
例 的 ， 聪 明 的 读者 可 以 从 命名 看 得 出 ， 图 5-7 的 效果 更 加 直观 。 


五 栏 效果 
四 栏 效果 
三 栏 效果 








图 5-7 非 固 定 列 宽 布局 自动 排列 布局 效果 
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图 5-7 只 是 浏览 器 窗口 变化 时 Masonry 自动 排列 出 来 的 3 种 效果 ， 代 码 均 在 同一 个 页 
面 。 对 于 初始 化 Masonry 的 方法 ， 官 方 网 站 还 提供 了 HTML 内 嵌 和 jQuery 插件 调用 两 种 方 
式 ， 具 体 请 参考 官网 。 

笔者 在 这 里 要 提醒 的 是 ， 如 果 要 在 IE 6、IE 7 等 低 版 本 的 浏览 器 下 使 用 这 个 开源 插件 ， 
需要 用 基于 jQuery 的 Masonry v2.1.08 版 本 ， 本 书 范例 使 用 的 是 Masonry v3.0.1 版 本 ， 在 低 版 
本 下 调用 的 代码 如 下 : 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/ jquery.min. 

js"> </script> 

<script src="jquery.masonry.min.js"></script> 

<script> 

Var $container = $('#container'); 

$container.imagesLoaded (function(){ 

$container.masonry ({ 

itemSelector : '.box', 
columnWidth : 250 
Dy 


Px 
</script> 


5.4 延迟 加 载 图 片 


- 般 瀑布 流 都 用 在 图 片 比较 多 的 网 站 ， 而 图 片 多 的 网 站 必然 会 消耗 宽带 流量 。 一 张 图 的 
体积 有 时 候 远 远 超过 这 个 网 页 本 身 的 代码 数据 量 ， 所 以 针对 图 片 的 按 实 际 需要 延迟 加 载 技 术 


5.4.1 延迟 加 载 是 何方 神圣 


Web 应 用 程序 的 瓶颈 往往 在 于 高 并 发 响应 速度 ， 从 第 21 章 起 讲 到 的 Node.js 就 是 解决 高 
并 发 响应 的 ， 而 响应 速度 则 又 是 所 有 项 目 参与 者 都 要 考虑 的 问题 ， 如 果 系统 响应 速度 过 慢 ， 
用 户 就 会 出 现 埋怨 情绪 ， 系 统 的 价值 也 会 大 打折 扣 。 因 此 ， 提 高 系统 响应 速度 是 非常 重要 
的 。 

延迟 加 载 又 称 懒 加 载 〈lazyload) ， 它 并 不 是 什么 新 技术 ， 而 是 一 种 优化 策略 ， 是 前 端 
发 人 员 对 网 页 性 能 优化 的 一 种 方案 。 在 各 类 大 型 网 站 中 都 有 懒 加 载 的 身影 ， 例 如 谷歌 的 图 片 
搜索 页 、 迅 雷 、 淘 宝 网 、QQ 空间 等 。 

这 种 策略 早 在 2003 年 就 被 著名 的 对 象 关 系 映 射 框架 Hibernate 所 采用 ， 主 要 就 是 在 真正 
需要 数据 的 时 候 才 调用 数据 。 后 来 微软 在 C#.NET Framework4.0 中 也 加 入 了 延迟 加 载 策略 ， 
又 称 为 延迟 实例 化 、 延 迟 初 始 化 等 ， 主 要 表达 的 思想 也 是 对 象 的 创建 将 会 延迟 到 使 用 时 创 
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建 ， 而 不 是 在 对 象 实例 化 时 创建 对 象 ， 即 用 时 才 加 载 。 这 种 方式 有 助 于 提高 应 用 程序 的 性 
能 、 避 免 浪 费 计 算 、 节 省 内 存 的 使 用 等 。 

-种 主要 是 针对 数据 做 延迟 加 载 优 化 ， 一 种 是 针对 对 象 实例 延迟 创建 优化 ， 那 么 在 
JavaScript 主宰 的 前 端 ， 延 迟 加 载 主要 是 针对 什么 呢 ? 主要 针对 图 片 、Flash 资源 、iframe 
等 。 因 为 这 些 东西 个 头 一 般 都 很 大 ， 下 载 需要 的 时 间 长 ， 提 高 系统 速度 是 第 一 要 务 ， 所 以 前 
端 延迟 加 载 必 不 可 少 。 

以 图 片 为 例 ， 网 页 中 的 img 标签 就 是 用 来 加 载 图 片 的 ， 当 HTML 代码 被 浏览 器 加 载 时 ， 
就 会 解析 各 种 连接 ， 包 括 CSS 的 、JS 的 ， 当 然 也 包括 img 标签 ， 然 后 继续 发 出 请 求 。 这 会 大 
大 浪费 宽带 资源 ， 也 会 阻塞 页 面 的 呈现 ， 可 能 用 户 会 看 到 一 直 在 加 载 ， 也 可 能 第 二 屏幕 的 图 
片 显示 了 ， 第 一 屏幕 的 图 片 还 没 下 载 完 。 

至 此 ， 相 信 读 者 已 明白 延迟 加 载 要 完成 的 任务 了 。 

同样 ， 它 的 工作 原理 也 是 针对 这 些 任务 而 定 的 : 


e 在 HTML 构造 输出 的 时 候 ， 先 不 要 设置 图 片 标签 img 的 src 属性 ， 改 用 其 他 属性 (如 
lazy) ; 

e 要 判断 图 片 (其 他 资源 同 理 ) 是 否 在 当前 可 视屏 范围 ; 

@ 根据 第 二 条 的 判断 把 其 他 属性 ( 如 lazy) 中 保存 的 值 设 置 给 src 属性 。 这 样 用 户 浏览 
到 哪里 浏览 器 就 会 加 载 哪里 的 图 片 。 


5.4.2 延迟 加 载运 用 实例 


延迟 加 载 图 片 比较 麻烦 的 地 方 是 如 何 判断 图 片 位 置 。 要 获得 元 素 相 对 于 页 面 的 绝对 位 
置 ， 通 常 使 用 offsetTop， 但 是 这 个 属性 只 是 取得 元 素 父 元 素 的 相对 位 置 ， 如 果 元 素 的 父 元 素 
或 父 元 素 的 父 元 素 设置 了 相对 定位 或 绝对 定位 ， 那 么 这 个 值 显然 是 不 准确 的 。 

所 以 ， 首 先 要 用 遍历 的 方式 来 获取 元 素 的 页 面 绝对 距 顶 值 ， 将 这 个 方法 放 到 basejs 中 。 


eg.getTop = function (El1){ 
Var top = 0; 
do{// 循 环 处 理 
top += El.offsetTop;// 计 算 Top 值 
}while((E1 = El.offsetParent) .nodeName != 'BODY');// 获 取 到 body 节点 为 止 
return top; 
] 7 


然后 ， 根 据 取得 的 值 来 判断 是 否 应 该 显示 。 


eg.lazy = function(){ 
Var doc = document; 
Var top = doc.documentElement.scrollTop || doc.body.scrollTop; 


// 滚 动 条 到 项 部 的 高 度 
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var winH = 


// 可 视窗 口 的 高 度 
var imgs = doc.getElementsByTagName ("img"); 
// 对 所 有 图 片 进行 批量 判断 是 否 在 浏览 器 显示 区 域内 


for(var i=0 ; i < imgs.length; i++){ 


La 


最 后 ， 构 建 一 个 HTML 页 面 ， 监 听 滚 动 条 滚动 事件 ， 整 合 的 代码 如 【范例 5-4】 所 示 。 





【范例 5-4 


<!DOCTYPE 
<html> 
<head> 


var src = imgs[i] .getAttribute('lzay-src'); 


if( _src !== imgs[i] .src ){// 判 断 图 片 是 否 已 经 显示 过 


var top = eg.getTop (imgs[i]);// 获 取 图 片 相对 于 顶部 的 位 置 


doc.documentElement.clientHeight||doc.body.clientHeight; 


if( top >= top && top <= toptwinH){// 判 断 图 片 是 否 在 显示 区 域内 
imgs[il.src = _src; 


延迟 加 载 图 片 范例 】 


html> 


<title> 懒 加 载 </title> 


<style> 


div{float:left; min-width:150px; min-height:150px;} 


</style> 
</head> 
<body> 
<div><img 
<div><img 
<div><img 
<div><img 
<div><img 
<div><img 
<div><img 
<div><img 
<div><img 
<div><img 
<div><img 


.<div><img 
. <div><img 


<div><img 
<div><img 
<div><img 
<div><img 


. <div><img 


src="loading.gif™" 
src="loading.gif" 
src="loading.gif™" 
src="loading.gif™ 
src="loading.gif™" 
src="loading.gif™" 
src="loading.gif™" 
src="loading.gif™" 
src="loading.gif" 
src="loading.gif" 
src="loading.gif" 
src="loading.gif" 
src="loading.gif" 
src="loading.gif" 
src="loading.gif" 
src="loading.gif" 
src="loading.gif" 
src="loading.gif" 


lzay-src="1 .jpg" 
lzay-src="2.jpg" 














lzay-src="3.jpg" 
lzay-src="4.jpg" 
lzay-src="5.jpg" 
lzay-src="6.jpg" 
lzay-src="7.jpg" 


lzay-src="8.jpg" 

lzay-src="9.jpg" 

lzay-src="10.jpg" 
lzay-src="11.jpg" 
lzay-src="12.jpg" 
13.jpg" 
14.jpg" 
lzay-src="15.jpg" 
lzay-src="16.jpg" 






lzay-sr 
lzay-src= 


lzay-src="17.jpg" 
lzay-src="18.jpg" 


alt=""></div> 
alt=""></div> 
alt=""></div> 
al ></div> 
alt=""></div> 
alt=""></div> 
al ></div> 
alt=""></div> 
alt=""></div> 
alt=""></div> 
alt=""></div> 
alt=""></div> 
al </div> 
alt=""></div> 
alt=""></div> 
alt=""></div> 
alt=""></div> 
alt=""></div> 
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<div><img src="loading.gif" lzay-src="19.jpg" alt=""></div> 
<div><img src="loading.gif" lzay-src="20.jpg" alt=""></div> 
<div><img src="loading.gif" lzay-src="21.jpg" alt=""></div> 
<div><img src="loading.gif" lzay-src="22.jpg" alt=""></div> 
</body> 

</html> 

<script src="base.js"></script> 

<script src="eg5.js"></script> 


<script> 

eg.1lazy(); // 判 断 页 面 打 开 时 的 第 一 屏 是 否 有 需要 加 载 的 图 

window.onscroll = function(){ //onscroll, onload, onresize 只 能 这 样 添加 
eg.lazy(); 

} 

</script> 


利用 后 面 【范例 22-7】 的 代码 ， 修 改 一 下 配置 指向 本 章节 的 代码 目录 ， 在 命令 行 运行 


“node22-7js” 搭 建成 一 个 Web 服务 器 ， 再 用 浏览 器 访问 【范例 5-4】 保 存 的 文件 ， 就 可 以 
看 到 图 5-8 的 效果 。 
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ille Firefox Olx 


查看 W 历史 人 @) 书签 @) 工具 人 帮助 0 














[3 Blocdhost 9527 





c 








贺 - HK Pn 











locahost:9527 2.6KB 
locahost:9527 1.3KB 


210 x 210 


5-8 懒 加 载 效 果 


第 一 屏 只 加 载 了 3 张 图 ， 两 个 正在 加 载 的 图 是 在 页 面 加 载 完成 后 把 firebug 窗口 调整 一 下 
才 看 到 的 ， 主 要 是 让 读者 能 够 直观 对 比 。 滚 动 滚动 条 时 ， 请 求 数 会 增加 ， 如 图 5-9 所 示 。 


CE3RERCZEIOCIZTD 











cahost9527 22@ 
caihost9527 39.81@ Re 
X localhost9527 15.618 1270.0.19527 
localhost9527 1561 1270.0.19527 
locahost9527 351 
ocahost:9527 2344 站 
x ocahost:9527 33.71B 

locahost:9527 2531 





图 5-9 滚动 滚动 条 加 载 需要 的 图 片 


延迟 加 载 就 是 使 用 这 种 方式 在 页 面 打开 的 时 候 减 少 请 求 数量 ， 节 省 宽带 ， 以 提高 页 面 打 
开 的 速度 ， 根 据 用 户 实际 的 浏览 情况 来 请 求 数据 ， 是 目前 Web 项 目 中 最 有 效 的 优化 策略 之 
一 ， 尤 其 是 对 于 图 片 量 大 的 网 站 。 


| 细 | 上面 的 代码 还 有 可 以 优化 的 地 方 ， 比 如 eg.lazy0 方 法 中 需要 排除 已 经 加 载 过 的 对 象 ， 
对于 有 从 而 减少 循环 遍历 的 次 数 。 还 可 以 预 加 载 两 屏 的 数据 ， 让 用 户 感 觉 不 到 有 延迟 。 


5.5 相关 参考 


e@ Twitter.com 一 一 某 些 网 络 可 能 需要 Web 代理 才能 访问 。 





流行 技术 一 一 CSS Sprites 
图 像 合 并 。 








到 masonry 的 历史 版 本 。 
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第 6 音 用 户 控件 的 构造 





目录 树 视图 


“Most of you are familiar with the virtues of a programmer. There are three, of course: 
laziness, impatience, and hubris.”( 大 部 分 人 都 熟悉 程序 员 的 美德 ， 有 三 点 : 懒 、 不 耐烦 以 及 
狂妄 自 大 。) 

一 一 Larry Wall ( Perl 语 言 之 父 ) 


地 球 之 肺 就 是 森林 ， 和 森林 中 最 多 的 就 是 树 ， 树 对 于 这 个 世界 来 说 是 基础 ， 没 有 它们 ， 世 
界 或 许 就 不 是 这 个 样子 。 

在 计算 机 世界 里 ， 树 (如 图 6-1 所 示 ) 依然 扮 演 着 极为 重要 的 角色 ， 如 二 叉 树 、Treap 
树 、 伸 展 树 、B 树 等 。 而 目录 树 是 更 接近 日 常生 活 的 一 种 树 ， 是 结构 展示 、 内 容 导 航 的 一 种 





经 典 组 织 形 式 。 
必 AN 
《d) (e) (1) 
(a) 星 型 (b) 环 型 (c) 树 型 〈d) 全 连接 〈e) 交 叉 环 (f) 网 状 
图 6-1 计算 机 组 织 形式 
本 章 主要 知识 点 : 
递归、 抽象 


@ JavaScript 基于 对 象 编程 


6.1 功能 设计 


树 的 基本 结构 如 图 6-1 中 的 (c) 图 那样 ， 只 有 一 个 顶点， 但 可 以 无 限 延 伸 下 去 。 很 像 现 
实生 活 中 的 一 棵 树 只 有 一 个 主干 ， 然 后 可 以 生长 成 无 数 的 枝叶 ， 所 以 树 结 构 的 基本 功能 就 是 


能 够 无 限 分 类 显示 ， 不 过 在 计算 机 中 它 被 倒置 过 来 表示 。 
我 们 通常 所 说 的 “无 限 分 类 ”这 个 词 就 是 树 应 用 中 的 一 个 基本 功能 。 
在 Web 项 目 中 ， 树 结构 通常 会 用 于 以 下 几 个 场景 ; 


e@ 城市 地 区 一 一 如 省 、 市 、 区 。 
e@ 产品 分 类 一 一 如 大 类 、 小 类 。 
@ 栏目 分 类 一 一 如 网 站 地 图 、 栏 目 导 航 。 
@ 文档 目录 一 一 如 Windows 资源 管理 器 。 


根据 上 面 的 场景 ， 可 以 粗略 地 归纳 出 ， 对 树 常用 的 操作 有 展开 、 收 缩 、 响 应 节点 单 击 事 
件 等 ， 这 些 操 作 在 界面 上 都 会 有 一 些 标识 图 标 。 而 在 实践 中 ， 根 据 不 同 项 目 服务 的 用 户 群 体 
的 不 同 ， 用 户 体验 和 具体 需求 也 不 尽 相同 ， 但 大 都 离 不 开 这 些 基本 操作 。 

设计 控件 的 第 一 个 要 求 是 没有 多 余 的 变量 污染 ， 如 jQuery 功能 强大 ， 但 是 入 口上 只 有 一 
个 ;第 二 个 要 求 是 能 够 复 用 ， 只 用 一 次 不 算是 控件 ， 只 是 一 个 代码 片段 ;第 三 个 要 求 是 可 
配置 。 


6.2 树 视图 的 最 简化 实现 


根据 前 面 的 分 析 ， 本 节 就 来 完成 树 视图 的 最 简化 实现 ， 同 时 完成 树 视图 最 基本 的 功能 


6.2.1 树 视图 的 HTML 结构 和 数据 结构 


在 页 面 上 只 需要 一 个 <div> 标 签 作为 树 视 图 的 最 外 层 容器 ， 让 生成 的 树 视图 都 放 到 里 面 ， 
外 观 则 另 由 CSS 代码 控制 。 本 节目 标 是 “最 简化 实现 ”， 所 以 下 面 并 没有 加 入 外 观 控制 之 类 
的 代码 ，JavaScript 代码 中 也 暂 不 考虑 外 观 控制 。 


<!DOCTYPE html> 

<html> 

<head> 

<title>javascript base tree</title> 
</head> 

<body> 

<div id="mytree"></div> 

</body> 

</html> 

<script src="base.js"></script> 


其 中 basejs 文件 是 之 前 用 过 的 一 些 基础 代码 集合 。 树 视图 的 每 个 节点 通常 都 有 一 个 唯一 
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的 标识 符 ， 这 里 将 其 定义 为 JavaScript 对 象 的 键 名 ， 它 对 应 的 父 节点 定义 为 pid， 用 以 关联 相 
互 之 间 的 关系 ， 用 cn 表示 其 中 文 名 称 ， 用 url 来 存储 可 能 的 链接 地 址 。 在 上 面 的 代码 后 追加 
如 下 数据 : 


<script> 
var dic = { 
"0" ; {pid:-1,cn:' 本 书目 录 ' ,url:'/'} 
1,"l"” : {pid:0,cn:' 第 1 章 JavaScript 概述 ', url:'/01'} 
1"2" : {pid:0,cn:' 第 2 章 用 JavaScript 验证 表单 ',url:'/02'} 
raIln {pid:lycns"1.1 认识 JavaScript",url:"#"} 
1"12" : {pid:1,cn:'1.2 配置 JavaScript 开发 环境 ', url:'#'} 
1"3"” : {pid:0,cn:' 第 3 章 JavaScript 实现 的 照片 展示 ', url:'/03'} 
1,"21" : {pid:2,cn:'2.1 最 简单 的 表单 验证 - 禁止 空白 的 必 填 项 目 ' ,url:'#'} 
1"22"m : {pid:2,cn:'2.2 处 理 各 种 类 型 的 表单 元 素 ' ,url:'#'} 
1"23" : {pid:2,cn:'2.3 输入 的 邮箱 地 址 正确 吗 ? 用 正则 来 校 验 复杂 的 格式 要 求 
I 
1"24"m : {pid:2,cn:'2.4 改善 用 户 体验 ' ,url:'#'} 
1"31"” ; {pid:3,cn:'3.1 功能 设计 ' ,url:'#'} 
1"32" ; {pid:3,cn:'3.2 照片 加 载 与 定位 " ,url1: '#'"} 
"33" : {pid:3,cn:'3.3 响应 鼠标 动作 ', url:'#'} 
yy 
</script> 


这 些 数 据 以 “本 书目 录 ” 结 构 为 基础 ， 利 用 JavaScript 内 置 对 象 特性 构建 。 由 于 数据 存 


储 可 能 是 乱 序 的 ， 这 里 也 是 乱 序 设置 ， 所 以 接 下 来 要 对 其 做 序列 化 处 理 。 另 外 ， 在 使 用 这 些 
数据 之 前 ， 还 应 该 把 某 个 节点 下 的 子 类 编号 先 列 出 来 ， 存 放 在 节点 的 child 数组 里 。 


for(var i in dic){ // 用 来 处 理 所 属 关系 
if(dic[i] .pid !==undefined){ // 判 断 是 指定 的 pid 才 处 理 
var pid = dic[il] .pid; 
if(dic[pid]){ // 判 断 父 类 是 否 存在 


dic[pid] .child || (dic[pid] ,child = []); 
// 判 断 父 类 有 无 child， 无 则 初始 化 
dic[pid] .child.push (i); // 登 记 到 父 类 child 中 


6.2.2 用 递归 最 简化 显示 树 

递归 理论 起 源 于 哥 德 尔 、 印 奇 、 图 灵 、 克 莱 尼 和 Emil Post 在 20 世纪 30 年 代 的 工作 ， 其 
中 克 莱 尼 还 是 正则 表示 法 的 发 明 者 。 

树 的 显示 要 做 的 事情 就 是 从 某 个 节点 开始 ， 遍 历 其 所 有 子 节点 ， 然 后 判断 子 节点 是 否 还 
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有 子 节点 ， 如 果 有 ， 则 继续 遍历 子 节点 的 子 节点 ， 如 此 反复 ， 直 到 结束 。 所 以 这 种 情况 只 
用 递归 方式 才能 完成 


在 网 页 中 罗列 数据 最 好 的 标签 就 是 <ul>， 所 以 同 在 一 个 父 节点 下 的 数据 都 应 该 包含 在 


<ul> 标 签 里 ， 请 看 【范例 6-1】 中 的 最 终 代码 。 


ownamuwmewmnP 





【范例 6-1 树 视图 的 最 简化 实现 】 
<!DOCTYPE html> 
<html> 
<head> 
<title>javascript base tree</title> 
</head> 
<body> 
<div id="mytree"></div> 
</body> 
</html> 
<script src="../base.js"></script> 
<script> 
var dic = { 
"0"m : {pid:-1,cn:' 本 书目 录 ' ,url:'/'} 
1,"l"” ; {pid:0,cn:' 第 1 章 JavaScript 概述 ' ,url:'/01'} 
1"2" ; {pid:0,cn:' 第 2 章 用 JavaScript 验证 表单 ', url:'/02'} 
:1"11"” : {pid:1,cn:'1.1 认识 JavaScript',url:'#'} 
1,"12"m : {pid:1,cn:'1.2 配置 JavaScript 开发 环境 ', url:'#'} 
1,"3" : {pid:0,cn:' 第 3 章 JavaScript 实现 的 照片 展示 ' ,url:'/03'} 
1,"21" : {pid:2,cn:'2.1 最 简单 的 表单 验证 - 禁止 空白 的 必 填 项 目 ' ,url:'#'} 
1"22" : {pid:2,cn:'2.2 处 理 各 种 类 型 的 表单 元 素 ' ,url:'#'} 
1"23"” : {pid:2,cn:'2.3 输入 的 邮箱 地 址 正确 吗 ? 用 正则 来 校 验 复杂 的 格式 要 求 
Le 
1,"24"m : {pid:2,cn:'2.4 改善 用 户 体验 ', url:'#'} 
1"31"” : {pid:3,cn:'3.1 功能 设计 ', url:'#'} 
1"32" : {pid:3,cn:'3.2 照片 加 载 与 定位 "url1: '#1} 
"33" : {pid:3,cn:'3.3 响应 鼠标 动作 ' ,url:'#'} 
7 / /国光 无 序 排列 下 面 必须 做 依赖 关系 处 理 
// 这 种 依赖 也 可 以 由 提供 数据 的 后 端 来 处 理 
for(var i in dic){ 
// 用 来 处 理 所 属 关系 
if(dic[i] .pid !==undefined) {// 判 断 是 指定 的 pid 才 处 理 
var pid = dic[il] .pid; 
if(dic[pid])t{ / /判断 父 类 是 否 存在 
dic[pid] .child || (dic[pid] .child = []); 
// 判 断 父 类 有 无 chi1d， 无 则 初始 化 
dic[pid] .child.push(i);// 登 记 到 父 类 child 中 


上 
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下 
< Var 2z3fTree = functionl(el,pid){ 


38 . var ul = document .createElement ("ul"); // 创 建 一 个 ul 元 素 
395 for(var i in dic){ // 遍 历数 据 
40. SiE(dicIEEBIOEE pia) 
// 判 断 节点 是 否 都 是 同一 个 父 节点 ， 即 是 否 是 当前 需要 显示 的 节点 
41. varl gl GTSDI // 取 得 一 个 节点 的 信息 
网 2 var 1i=document .createElement ("1i") ;// 创 建 一 个 1i 元 素 
43. 1i.innerHTML = '<a href="'+dl.url+'">'+dl.cn+'</a>'; 
// 拼 接 html 
44. if(dl.child && dl.child.length>0){// 判 断 是 否 还 有 子 类 
45. Zz3fTree (1i,i.toString());// 递 归 下 去 
46. } 
7 ul.appendchild (1i); // 把 拼装 好 的 1i 追加 到 ul 中 去 
48. }elsef{ 
49. continue; // 继 续 下 一 个 循环 
50. } 
51, } 
52, el.appendchild (ul); // 插 入 到 给 定 的 元 素 中 
53 }; 


5 z3fTree (eg.$ ("mytree"),-1); 
S59 </script> 


第 37~53 行 的 函数 z3fTree() 接 受 两 个 参数 ，el 是 给 定 的 元 素 ，pid 是 指定 的 父 节 点 。 第 一 
次 调用 时 ， 给 定 元 素 是 页 面 上 id 为 mytree 的 <div> 标 签 ， 指 定 父 节点 从 -1 开始 。 后 续 的 递归 
传递 进去 的 参数 就 是 程序 自动 加 进去 的 。 把 代码 保存 为 html 文件 ， 然 后 在 浏览 器 中 打开 ， 效 
果 如 图 6-2 所 示 。 














[9 
javascript base tree x 【十 
€ © fley//FV06/06-1html © 《 全 | 自 » | 三 























6-2 最 简化 的 目录 树 视图 
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6.3 类 和 抽象 


很 多 语言 都 有 类 和 抽象 ，1967 年 挪威 计算 中 心 的 Kisten Nygaard 和 Ole-Johan Dahl 开发 
了 Simula 67 语言 ， 它 提供 了 比 子 程序 更 高 一 级 的 抽象 和 封装 ， 引 入 了 数据 抽象 和 类 的 概 
念 ， 被 认为 是 第 一 个 面向 对 象 语言 。 


6.3.1 基于 对 象 (Object-Based) 和 面向 对 象 (Object-Oriented ) 


基于 对 象 和 面向 对 象 是 两 个 极 易 混 淆 的 概念 。 基 于 对 象 (ObjectBased) 通常 指 的 是 对 数 
据 的 封装 ， 以 及 提供 一 组 方法 对 封装 过 的 数据 操作 ， 比 如 C 的 IO 库 中 的 FILE * 就 可 以 看 成 
是 基于 对 象 的 。 面 向 对 象 (Object Oriented，OO) ， 用 纯粹 的 理论 去 理解 就 是 必须 具备 封 
装 、 继 承 、 多 态 三 大 特点 ， 缺 一 不 可 。 

程序 = 基于 对 象 操作 的 算法 + 以 对 象 为 最 小 单位 的 数据 结构 。 对 代码 的 封装 使 得 代码 得 
以 复 用 ， 减 少 了 代码 的 体积 ， 同 样 使 问题 简化 。 合 理 的 数据 结构 使 得 数据 量 减少 ， 或 者 简化 
数据 操作 算法 。 

Java 是 面向 对 象 的 程序 设计 语言 ，JavaScript 很 像 Java 但 并 不 支持 所 有 Java 面向 对 象 的 
功能 ， 只 能 支持 其 中 一 部 分 。 

在 JavaScript 里 ， 你 所 知 的 所 有 东西 几乎 都 是 对 象 ， 但 是 它 的 语法 里 并 没有 class 
(类 ) ， 所 以 我 们 只 能 把 它 理解 为 基于 对 象 。VB ( 非 VB.net) 、Flash ActionScript 2.0 和 
VBScript 等 都 和 JavaScript 一 样 是 基于 对 象 的 。 

面向 对 象 和 基于 对 象 之 间 的 界限 既 清 楚 又 模糊 。 说 它 清 楚 ， 是 因为 面向 对 象 语言 必须 从 
语法 上 直接 支持 继承 和 动态 绑 定 ， 而 基于 对 象 语言 无 法 从 语法 上 直接 做 到 这 一 点 。 说 它 模 
糊 ， 是 因为 基于 对 象 的 语言 可 以 在 没有 语法 直接 支持 的 情况 下 ， 通 过 一 些 技巧 达成 与 面向 对 
象 语言 相同 的 效果 。 


6.3.2 用 JavaScript 创建 一 个 类 


JavaScript 虽然 不 能 直接 从 语法 上 使 用 class， 但 是 能 够 模拟 出 “类 ”的 效果 。Stoyan 
Stefanov (Yahoo YSLOW 项 目的 架构 师 ) 编写 的 Ohject-Oriented JavaScript 这 本 书 介绍 了 很 
多 种 面向 对 象 的 编程 方法 。 在 这 里 介绍 一 种 最 容易 理解 的 构造 函数 法 。 

这 是 经 典 方法 ， 在 很 多 JavaScript 代码 中 都 可 以 见 到 。 它 用 构造 函数 模拟 “类 ”， 在 其 
内 部 用 this 关键 字 指 代 实 例 对 象 。 

function book(){ 


this .name = "JavaScript 实例 大 全 " 
下 
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生成 实例 的 时 候 ， 使 用 new 关键 字 。 


Var mybook = new book() 7 
alert (mybook.name) ; //JavaScript 实例 大 全 


如 果 不 想 每 次 都 用 new 关键 字 ， 还 可 以 这 样 改造 构造 函数 。 


function book(){ 
if (!(this instanceof book)) { return new book() }; 
this.name = "JavaScript 实例 大 全 " 

} 


这 时 候 ， 就 可 以 省 去 等 号 后 面 的 new 关键 字 。instanceof 操作 符 专门 用 来 检测 对 象 是 否 是 
某 个 类 的 实例 ， 如 果 不 是 就 自动 返回 一 个 new 过 的 对 象 。 


6.3.3 静态 属性 、 方 法 和 动态 属性 、 方 法 


属性 和 方法 是 类 最 基本 的 组 成 ， 动 态 方法 和 属性 必须 要 实例 化 后 才能 访问 ， 而 静态 方法 
和 属性 无 须 实例 化 就 可 以 使 用 ， 这 是 类 的 基础 功能 。 

对 于 6.3.2 小 节 中 的 代码 ， 没 有 实例 化 book 时 ， 是 无 法 访问 到 book.name 这 个 属性 的 ， 
也 就 是 说 this 挂 载 的 都 是 动态 属性 和 方法 。 如 何 才能 设置 静态 属性 和 方法 呢 ? 


book .material = " 纸 质 "; 
book.getSize = function(type){ 
Switch (type){ 
case 16: 
return "16K" 
case 32: 
return "32K" 
default: 
return "16K" 
上 
这 


- 般 大 家 看 的 书 都 是 纸 质 书 ， 所 以 book.material 就 是 一 个 静态 属性 ， 无 须 实例 化 。 另 
外 ，book.getSize() 是 一 个 静态 方法 ， 书 一 般 分 16 开 或 32 开 ， 通 过 传递 16 或 32 的 值 即 可 返 
回 一 个 开 数值 ， 默 认 是 16 开 。 


说 了 静态 成 员 ， 再 介绍 一 下 动态 属性 和 方法 的 挂 载 方法 ， 那 就 是 通过 prototype 属性 ， 这 
对 于 不 想 用 this 或 不 能 用 this 的 情况 是 一 个 很 好 的 补充 。 





book.prototype.pages = 460; 
book.prototype.randomInfo = function(){ 
var 1 = ["JavaScript 基础 应 用 " 
1, "JavaScript 与 HTML5 表单 应 用 " 
, "JavaScript 与 HTML5 高 级 应 用 " 
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, "JavaScript 与 jQuery 综合 应 用 " 
, "JavaScript 与 Node.js 综合 应 用 "] ; 
return 1[(Math.random()*]1.length)>>0] 
] 


调用 时 忽略 prototype， 直 接 是 实例 名 .属性 和 实例 名 .方法 ， 如 mybook.pages 和 
mybook.randomInfo0。 书 页 和 书 的 目录 都 是 不 同 的 ， 它 们 应 该 是 动态 变化 的 。 


6.3.4 JavaScript 继承 


假如 笔者 写 了 很 多 书 ， 但 是 笔者 的 基本 信息 是 不 变 的 ， 所 以 每 本 书 的 作者 信息 相同 。 用 
prototype 也 可 以 实现 继承 ，【 范 例 6-2】 整 合 前 面 的 代码 后 又 加 入 了 继承 。 


【范例 6-2 JavaScript 继承 】 


function z3fBook(){}7 // 父 类 
Z3fBook.Prototype.author ={ 
name:' 张 三 封 ' 
QQ:'10590986' 
/web:'z3f.me' 
} 
function book(){ 
if (!(this instanceof book)) { return new book() }; 
this.name = "JavaScript 实例 大 全 " 


oa Dp 


三 记 
OoO: 


} 
book.prototype = new z3fBook(); // 继 承 父 类 信息 
3 book.material = " 纸 质 "; 


3 book.getSize = function (type)1{ 

Ia Switch (type){ 

5 case 16; 

16. return "16K" 

17。 case 32: 

18, return "32K" 

95 default: 

20. return "16K" 

2 1 

22， 3 

235 book.prototype.pages = 460; 

过 book.prototype.randomInfo = function(){ 
25. var 1 = ["JavaScript 基础 应 用 " 

26 +,"JavaScript 与 HTML5 表单 应 用 " 
27 , "JavaScript 与 HTML5 高 级 应 用 " 
28 v"dJavaScript 与 jQuery 综合 应 用 " 
30 , "JavaScript 与 Node.js 综合 应 用 "] ; 
而 return 1[ (Math.random()*]1.length)>>0] 

S25 }; 

23 Var yourBook = book(); 

34 alert (yourBook.author.name); // 张 三 封 
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< alert (YourBook .author.0o) 7 //10590986 
326s alert (yourBook.pages); //460 


从 以 上 代码 可 以 看 到 ，z3fBook(0) 作 为 一 个 基 类 ， 保 存 了 作者 的 基本 信息 。 作 者 编写 的 每 
-本 书 book 都 应 该 继承 该 信息 。 在 读者 拿 到 每 一 本 具体 的 书 时 就 相当 于 yourBook 实例 化 后 
的 book 对 象 ， 所 以 在 输出 yourBook.authorname 这 些 只 属于 基 类 提供 的 信息 时 也 能 正确 取 
值 ， 表 明 继 承 成 功 。 


6.3.5 私有 属性 和 方法 


只 要 不 挂 在 this 和 prototype 上 的 属性 和 方法 都 是 私有 的 ， 把 【范例 6-2】 中 的 book 构造 
函数 改造 如 下 : 
function book(){ 
if (!(this instanceof book)) { return new book() }; 
var bookname = "JavaScript 实例 大 全 " 
this.getName = function(){ 
return bookname; 
} 
this.setName = function (name){ 
bookname = name; 
} 


如 果 不 提供 getName() 和 setName() 方 法 ，bookname 就 只 能 在 内 部 用 。 外 部 要 获取 和 操作 
只 能 通过 公共 的 方法 : 


alert (yourBook.getName ()); //JavaScript 实例 大 全 


6.3.6 抽象 


抽象 是 从 众多 的 事物 中 抽取 出 共同 的 、 本 质 性 的 特征 ， 而 舍弃 非 本 质 的 特征 。 例 如 ， 苹 
果 、 香 共 、 梨 、 葡 萄 、 桃 子 等 ， 它 们 共同 的 特性 就 是 水 果 ， 得 出 水 果 概 念 的 过 程 就 是 一 个 抽 
象 的 过 程 。 

要 抽象 ， 就 必须 进行 比较 ， 没 有 比较 就 无 法 找到 在 本 质 上 共同 的 部 分 。 共 同 特征 是 指 那 
些 能 把 一 类 事物 与 他 类 事物 区 分 开 的 特征 ， 这 些 具 有 区 分 作用 的 特征 又 称 本 质 特征 。 因 此 抽 
取 事 物 的 共同 特征 就 是 抽取 事物 的 本 质 特征 ， 售 弃 非 本 质 的 特征 。 所 以 抽象 的 过 程 也 是 一 个 
裁剪 的 过 程 。 

在 抽象 时 ， 同 与 不 同 ， 决 定 于 从 什么 角度 来 抽象 。 抽 象 的 角度 取决 于 分 析 问 题 的 不 同 
目的 。 

抽象 是 一 种 逻辑 思维 活动 过 程 ， 正 确 的 和 具有 实用 性 的 概念 应 该 是 简洁 和 清晰 的 ， 否 则 
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它 不 但 不 能 成 为 我 们 进行 思维 的 利器 ， 反 而 会 成 为 思维 的 包 裕 。 所 以 在 抽象 思维 的 时 候 应 当 
了 解 各 种 基础 概念 ， 似 是 而 非 只 会 给 程序 留 下 漏洞 。 

抽象 出 来 的 特征 通常 可 以 分 成 3 类 : 

e 相同 

e@ 相似 ， 如 move、moveTo 

@ 相反 ， 如 open 和 close、show 和 hide 


6.4 复杂 的 树 视图 


制作 用 户 控件 的 目的 是 提高 代码 复 用 率 和 移植 ， 也 因此 方便 了 代码 的 维护 。 
在 6.2 节 里 实现 了 一 个 最 简单 的 树 视图 ， 但 是 这 个 树 视图 对 于 移植 和 复 用 都 很 不 方便 。 
如 何 对 它 进行 控件 化 呢 ? 


6.4.1 闭 包 隔离 变量 污染 
众所周知 ，jQuery 强大 但 是 入 口 单一 ， 没 有 变量 污染 ， 它 是 如 何 做 到 的 呢 ? 
(function( window, undefined ) { 
Var jQuery=... 
.… .内 部 代码 ... 
window.jQuery = window.$ = jQuery; 
}) ( window ); 
下 面 将 树 控件 起 名 为 T， 挂 载 到 window 对 象 下 ， 这 样 才能 保证 在 网 页 中 被 自由 调用 。 


(function (window) { 
window.T = window.T || function(){}; 
}) (window); 


6.4.2 省 去 new 关键 字 调 用 控件 


想 一 想 jQuery， 似 乎 大 家 在 调用 的 时 候 就 没有 用 new 关键 字 。 我 们 也 来 实现 一 个 ， 另 外 
还 需要 让 控件 接受 一 些 配置 参数 ， 那 么 就 需要 改造 一 下 构造 函数 : 
window.T = window.T || function(cfg){ 
if (!(this instanceof T)) { return new T(cfg) };// 省 略 new 关键 字 调用 


this.SET = cfg;// 存 储 起 来 ， 让 内 部 可 以 自由 使 用 
this.ROOT = nul1;// 记 录 根 节点 
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6.4.3 丰富 控件 方法 


在 编写 代码 前 ， 应 该 先 打 个 草稿 。 由 于 篇 幅 限 制 ， 我 们 只 完成 window 资源 管理 器 的 模 
拟 ， 即 控件 可 以 自由 展开 、 收 缩 ， 并 且 能 发 出 每 个 节点 的 单 击 事件 。 其 效果 如 图 6-3 所 示 。 




































EE EPS base tree oft Interaet Exp 回回 四 
工具 四 大助 旭 | 文件 四 “六 竹 四 查看 四 ”收藏 办。 工具 中 帮助 加 | 居 
| javaseript base tree + 因 辣 -上 日 -四 加 多 | 让 时 让 | 
EE 
旦 本 书目 录 前 本 书目 录 
局 第 ] 章 Javascript 概 述 后 第 ! 章 Javascript 概 述 
Ll eit OL1 二 it 
日 1.2 配置 JavaScript 开 : 日 1.2 配 冒 JavaScript 开 发 环 直 
口 第 2 童 用 Tavascript 验 证 表单 口 第 2 齐 用 JavaScript 验 证 表单 
号 宇 3 童 Tove rivt 实 现 的 照片 展示 品 avascript 实 现 的 照片 展示 
时 控件 说 明 
口 构造 器 
局 静态 方法 
司 动态 方法 D initO 
口 initO D addllode (el, pid) 
D addllode (el, pid) D setNodeClass(el, pid child) 
D setNodeClass (el, pid, child) D setNodeBvent (el) 


日 setNodeEvent (el) 





周 Bw, RN 有 | | | | [3 了 Re 


图 6-3 树 控件 效果 图 


其 中 “本 书目 录 ” 的 第 一 和 第 三 节点 是 收缩 的 ，“ 控 人 说明” 的 第 三 节点 是 展开 的 。 因 
为 代码 是 复 用 的 ， 为 了 便于 移植 ， 笔 者 把 前 面 base.js 中 积累 的 常用 方法 挂 载 到 控件 里 。 

/* 静 态 方法 */ 

T.extend = function() {/* 合 并 对 象 */ 


Var len = arguments.length 
10bj = arguments[0] 


tmp 
if(!obj || typeof obj === "number" || obj.constructor !== Object){ 
es 


由 
EO0r (wa 1 "= 1 1 < Leny 于 二 二) 
tmp = arguments[i]; 
if(tmp){ 
for (var oO in tmp){ 
obj [ol = tmpl[o]; 
1 
1 
} 
return obj; 
] 7 
T.$ = function (id) {// 取 得 DOM 元 素 
return document .getElementById(id); 
} 
T.hasClass = function (el,cls) {// 判 断 是 否 包含 某 个 class 
return el.className .match (new RegExp('(\\s|^)'+cls+' (\\s1$)')); 
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] 7 
T.addclass = function(el,cls){// 增 加 class 


if (!this.hasClass (el，cls)) el.className += " "+cls; 


] 7 
T.removeClass = function(el，cls) {// 移 除 某 个 class 


if (this.hasClass(el，cls)) { 
Var reg = new RegExp('(\\sl^)' + cls + '(\\s1$)'); 


el.className = el.className.replace(reg, ' '); 


}; 

T.find = function (el,target) {// 根 据 ClassName,tagName, ID 查找 
Var target = target.replace(/#|\./g,""); 

= el.children;// 获 取 元 素 子 元 素 集合 


var cd= 
for (var i=0;i<cd.length;i++){ 
var P = cd[il; 
if(p.tagName.toLowerCase() === target.toLowerCase() || p.id 
=== target || T.hasClass (P,target)) return p; 
和 
return null; 
}; 
// 绑 定 事件 


T.addListener = function(target,type,handler){ 


if(target.addEventListener){ 
target .addEventListener (type,handler, false); 


}else if(target.attachEvent){ 
target .attachEvent ("on"+type,handler); 


}elset 
target["on"+type]=handler; 


E 

] 7 

同时 把 它们 作为 静态 方法 ， 无 须 实例 化 就 可 以 调用 ， 也 便于 其 他 控件 使 用 。 

作为 一 个 控件 总 会 有 一 些 独 有 的 动态 方法 ， 也 就 是 实例 化 后 才 可 使 用 的 ， 将 这 样 的 方法 
挂 载 到 prototype 属性 下 : 

Var P = T.prototype; 

通过 转 接 ， 将 省 略 不 少 字 节 ， 代 码 也 便于 阅读 。 

控件 常见 的 一 个 方法 就 是 initO 初 始 化 方法 : 


P.init = function (cfg) {// 模 板 和 配置 文件 的 处 理 
T.extend (this.SET,cfg||{}); 
Var set = this.SET,dic = set.data 
for (var i in dic) {// 用 来 处 理 所 属 关系 
if(dic[il] .pid !==undefined){ 
var pid = dic[i] .pid; 
if (dic[pid]){ // 判 断 父 类 是 否 存在 
dic[pid] .child || (dic[pPid]l .child = []); 
// 判 断 父 类 有 无 chi1d， 无 则 初始 化 


// 判 断 是 指定 的 pid 才 处 理 
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dic[pid] .child.push(i);// 登 记 到 父 类 child 中 


} 
this.addNode (T.$ (this.SsET.id),-1); 
] 7 


在 init() 里 首先 用 静态 方法 extend0 合 并 处 理 配置 信息 ， 并 且 格 式 化 JSON 数据 ， 最 后 调 
用 添加 节点 函数 addNode()。 


P.addNode = function(el,pid){ // 在 某 个 父 节点 下 增加 子 节点 
if(this.ROOT === null) this.ROOT = pid; // 记 录 根 id 
var ul = document .createElement ("ul");// 创 建 一 个 ul 元 素 
var dic = this.SET.data; 
for(var i in dic){// 遍 历数 据 
if (dic[i] .pid == pid){ 
// 判 断 节点 是 否 都 是 同一 个 父 节点 ， 即 是 否 是 当前 需要 显示 的 节点 
var dl = dic[i];// 取 得 一 个 节点 的 信息 
var child = dl.child && dl.child.length>0; // 判 断 是 否 还 有 子 类 
var 1i = document.createElement ("1i"); // 创 建 一 个 1i 元 素 
1i.innerHTML = '<span id="s'+i+'"></span><a href="'+ 
dli.urlt+'">'+dl.cn+'</a>';// 拼 接 html 
if(child){ 
this.addNode (1i,i);// 递 归 下 去 
this.setParentNodeEvent (1i);// 设 置 父 节点 事件 
} 
this.setNodeClass (1i,pid,child) ;// 设 置 节点 样式 
this.setNodeEvent (1i) ;// 设 置 节点 事件 
ul.appendchild (1i) ;// 把 拼装 好 的 1i 追加 到 ul 中 去 
}else{ 
continue;// 继 续 下 一 个 循环 
} 
el.appendchild(ul); // 插 入 到 给 定 的 元 素 中 
] 7 


addNode() 方 法 是 主要 的 方法 ， 这 里 需要 增加 一 些 更 丰富 的 操作 。 比 如 设置 父 节点 的 展 


开 和 关闭 事件 、 设 置 节点 样式 、 设 置 节点 事件 等 ， 而 且 每 个 节点 除 <a> 标 签 之 外 还 有 <span> 
标签 。 








P.setNodeClass = function(el,pid,child)t{ 
var cls = "page";// 默 认 子 节点 样式 
if(this.ROOT === pid){ 

cls = "root"; // 设 置 根 节点 样式 
}else if(child>0){ 
cls = "open"; // 设 置 父 节点 样式 





} 
T.addclass (el,cl1s); 
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a 


根 节 点 的 样式 和 其 他 节点 样式 均 不 同 : 


P.setParentNodeEvent = function(el)1{ 
var span = el.firstChild; // 找 到 第 一 个 子 元 素 
T.addListener (span,"click",function(){ 
if(T.hasClass (el,"open")){ 
T.removeClass (el, "open"); 
T.addClass (el,"close"); 
}elsef 
T.removeClass (el, "close"); 
T.addClass (el, "open"); 


hs 
] 7 


父 节 点 的 展开 和 关闭 都 是 靠 单 击 事件 触发 的 : 


P.setNodeEvent = function(el)1{ 
var a = T.findl(el,"a"); 
var self = this;// 存 储 this 对 象 
T.addListener(a, "click",function (event){ 
if(typeof self.SET.onclick === "function"){ 
self.SET.onclick(event.srcElement||this); 


// 这 里 的 this 和 上 面 的 this 指向 不 同 的 对 象 


}) 7 
有 
对 节点 单 击 的 处 理 也 是 绑 定 在 单 击 事件 上 的 ， 只 是 元 素 不 同 。 这 里 还 接受 配置 参数 里 传 
递 过 来 的 onclick 回调 函数 ， 由 于 function 在 JavaScript 里 可 以 作为 参数 传递 ， 因 此 配置 灵活 
度 会 得 到 极 大 的 提高 ， 不 过 这 些 回调 函数 都 需要 在 内 部 作为 验证 并 调用 ， 包 括 回调 函数 能 使 
用 的 参数 都 可 以 控制 。 
在 网 页 中 如 何 设置 回调 函数 呢 ? 请 看 下 面 的 代码 。 














Var myTree = T({id:"mytree",data:dic 

ronclick:function (node){ 
alert (node.text);// 弹 出 节点 文本 
} 
D1); 

myTree.init() 7 

Var myTree2 = T({id:"mytree2",data:dic2}); 

myTree2 .init()7 


回调 函数 就 是 一 个 参数 而 已 。 整 个 HTML 结构 如 【范例 6-3】 所 示 。 
【范例 6-3 控件 的 HTML 结构 及 其 调用 】 


<!DOCTYPE html> 
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25. 
26 . 


33 . 
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<html> 

<head> 

<title>javascript tree</title> 

<link rel="stylesheet" href="T.css" type="text/css" /> 

</head> 

<body> 

<div id="mytree" class="T"></div> 

<div id="mytree2" class="T"></div> 

</body> 

</html> 

<script src="base.js"></script> 

<script src="z3fTree.js"></script> 

<script> 

var dic = { 

: {pid:-1,cn:' 本 书目 录 ' ,url:'/'} 

"1l”: {pid:0,cn:' 第 1 章 JavaScript 概述 ',url:'/01'} 

1,"2"” ; {pid:0,cn:' 第 2 章 用 JavaScript 验证 表单 ', url:'/02'} 

1"11"” :; {pid:1,cn:'1.1 认识 JavaScript',url:'javascript:;'} 

1"12"m : {pid:1,cn:'1.2 配置 JavaScript 开发 环境 ', url: 
"javascript:;'} 

1,"3"” : {pid:0,cn:' 第 3 章 JavaScript 实现 的 照片 展示 ', url:'/03'} 

1,"21"” : {pid:2,cn:'2.1 最 简单 的 表单 验证 - 禁止 空白 的 必 填 项 目 '， 
url:'javascript:;'} 

1"22" ; {pid:2,cn:'2.2 处 理 各 种 类 型 的 表单 元 素 ', url: 

'javascript:;" 

1"23" : {pid:2,cn:'2.3 输入 的 邮箱 地 址 正确 吗 ? 用 正则 来 校 验 复杂 的 

格式 要 求 ' ,url:'javascript:;'} 

1"24" ; {pid:2,cn:'2.4 改善 用 户 体验 ', url:'javascript:;'} 

1"31"” ; {pid:3,cn:'3.1 功能 设计 ', url:'javascript:;'} 

1"32"m : {pid:3,cn:'3.2 照片 加 载 与 定位 ', url:'javascript:;'} 

1,"33"” : {pid:3,cn:'3.3 响应 鼠标 动作 ', url:'javascript:; 








] 7 
var dic2 = { 
{pid:-1,cn:' 控 件 说 明 ', url:'/'} 
PT [pids0rnensn 构 造 姑 汪 ar1:m/01' 
1"11"” ; {pid:1,cn:' 参 数 : cfg',url:'javascript:;'} 
rm2" {pidi0rens' 竟 态 方法 "yarls"/02"T 
227 {pid 2cns "oxtend(obllrobjle .LrobI]) 7 
url:'javascript:;"'} 
22 Didr2ren sd orlarjavacriptarsF 





r"23" 3 {pid:2,cn:'hasclass(el,cls)',url:'javascript:»"} 
"24" :; {pid:2,cn:"addclass(el,cls)',url:'javascript:;"} 

"25" 3 {pid:2,cn:'removeClass(el,cls)',url:"javascript:?;"'} 
1"26" : {pid:2,cn:'addListener (target,type,handler)', 
人 


41. 
42. 
43。 
44. 


45. 
46. 
47. 
48. 
49。 


50. 
a 
52, 
535 
54. 
De 


1"3" : {pid:0,cn:' 动 态 方法 ', url:'/03'} 
3 plone Ll rit 
rm32" » {pid3ren: "addNode(elrpid) "rarl:"javascripts:;"} 
1"33" : {pid:3,cn:'setNodeClass (el,pid,child)', 
url:'javascript:;'} 
1"34" : {pid:3,cn:'setNodeEvent (el)',url:'javascript:;'} 
i; 
var myTree = T({id:"mytree",data:dic 
onclick:function (node){ 
alert (node.innerText| |node.text); 


// 输 出 文字 (兼容 IE 和 其 他 浏览 器 ) 


71); 
myTree.init(); 
Var myTree2 = T({id:"mytree2",data:dic2}); 
myTree2.init(); 
</script> 


读者 可 能 注意 到 了 ， 一 个 漂亮 的 控件 不 可 能 完全 没有 CSS，【 范 例 6-3】 中 的 T.css 代码 
如 下 : 


ul, 


2 


} 
< 下 
-T 


1i{ list-style: none;}/* 去 掉 自 带 的 样式 */ 
.root{ 
background: url("img/base.gif") no-repeat scroll 0 0 transparent; 


padding-left: 20px;/* 把 图 标 用 背景 的 方式 显示 ， 不 重复 ， 然 后 内 容 向 右 位 移 */ 


.open{ 
background: url("img/folderopen.gif") no-repeat scroll 0 0 transparent; 


.pagel{ 
background: url("img/page.gif") no-repeat scroll 0 0 transparent; 
padding-left: 20px; 


.open span{display:inline-block; width:20px;height:20px;} 

.Page span{display:none;} 

.close{ 

background: url("img/folder.gif") no-repeat scroll 0 0 transparent; 


.Close span{display:inline-block; width:20px;height:20px;} 
.close ul{display:none;}/* 当 父 节 点 切换 到 关闭 状态 时 ， 其 子 节点 自动 隐藏 */ 


到 此 为 止 ， 基本 上 完成 了 一 个 相对 6.2 节 更 为 复杂 的 树 视图 ， 当 然 应 用 于 实际 项 目 时 ， 
还 需要 补充 一 些 更 为 丰富 的 操作 。 本 例 仅 仅 讲 了 基本 的 流程 和 步骤 ， 以 便 引 导读 者 入 门 ， 相 
信 读 者 能 够 以 此 举一反三 ， 编 写 出 更 多 优秀 的 控件 。 

由 于 兼容 性 问题 ， 类 似 这 样 甚至 更 为 复杂 的 用 户 控件 都 是 基于 jQuery 的 ， 这 样 做 一 方面 
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是 因为 节省 开发 成 本 ， 另 一 方面 是 因为 jQuery 的 广泛 应 用 。 


6.5 相关 参考 


ezTree 一 一 基于 jQuery 实现 的 多 功能 “ 树 插件 ”， 最 大 优点 是 优异 的 性 能 、 灵 活 的 配 
置 、 多 种 功能 的 组 合 ， 网 址 为 http://www.ztree.me。 

e jQuery ligerUI 一 一 基于 jQuery 的 一 整套 UI 控件 ， 当 然 也 包括 “ 树 ”， 国 产 免费 ， 网 
址 为 http://www.ligerui.com/。 
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第 二 篇 


HTMLS+CSS3 
实战 篇 





第 7 音 HTMLS 概述 


“人 们 总 是 害怕 改变 。 电 被 发 明 出 来 的 时 候 他 们 害怕 电 ， 是 不 是 ? 他 们 害怕 煤 ， 害 怕 蒸 
汽机 车 ， 无 知 无 所 不 在 ， 并 导致 坝 惧 。 但 随 着 时 间 推移 ， 人 们 终 完 会 接受 最 新 的 科技 。” 
一 一 来 自 网 络 


HTMLS 很 年 轻 ， 但 是 也 很 强大 。HTMLS 的 第 一 份 正式 草案 在 2008 年 1 月 22 日 才 公布 ， 
但 如 今 不 能 用 HTML5 实现 的 应 用 越 来 越 少 。 读 者 应 该 好 好 地 认识 它 ， 可 以 说 它 就 是 未 来 。 
本 章 主要 知识 点 : 


e HTML5 的 新 特性 
e@ 与 日 HTML 的 对 比 


7.1 什么 是 HTML5 


图 7-1 是 HTML5 华丽 的 LOGO， 虽 然 官方 说 它 只 是 一 系列 技术 的 图 标 ， 没 有 特殊 意 
义 ， 但 是 笔者 更 希望 它 能 够 成 为 互联 网 发 展 最 坚实 的 后 盾 ， 用 时 下 一 个 流行 的 词语 解释 一 一 
可 称 之 为 “V5”。 


HTML 





图 7-1 HTML5 的 LOGO 


7.1.1 差点 天 折 的 HTML5 


现在 大 家 都 知道 ECMA 维护 着 JavaScript 的 标准 ，W3C 维护 着 Web 中 常见 的 标准 ， 如 
CSS、DOM、HTML、XML、XHTML、SVG 等 。W3C 目前 也 负责 指定 HTML5 标准 ， 只 是 
鲜 为 人 知 的 是 W3C 并 不 是 一 开始 就 主导 制定 HTML5， 也 并 不 是 唯一 制定 HTMLS 标准 的 组 
织 。 

在 Web 发 展 早期 ，HTML 标准 的 制定 都 是 在 浏览 器 厂商 们 相互 协商 下 产生 的 ， 比 如 
HTML2.0、HTML3.2 到 HTML4.0、HTML4.01。 即 先 有 实现 后 有 标准 ， 在 这 种 情况 下 ， 这 些 
协商 出 来 的 HTML 标准 不 是 很 规范 ， 而 浏览 器 厂商 也 心 知 肚 明 ， 对 于 很 多 含有 错误 HTML 
代码 的 页 面 也 相当 宽容 ， 其 中 下 就 是 典型 的 例子 。 

W3C 随后 意识 到 了 这 个 问题 ， 为 了 规范 HTML，W3C 结合 XML 制定 了 XHTML1.0 标 
准 ， 这 个 标准 没有 增加 任何 新 的 tag， 只 是 按照 XML 的 要 求 来 规范 HTML， 同 时 也 带 来 了 不 
同 的 DOCTYPE 模式 。 


e 严格 模式 : <IDOCTYPE html PUBLIC "-//W3C/DTD XHTML1.0 Strict/EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll -strict.dtd">, 

。 过 渡 模 式 : <!DOCTYPE html PUBLIC "-/W3C//DTD XHTML1.0 Transitional//EN" 
"http:Wwww.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">。 

e 框架 模式 : <!DOCTYPE html PUBLIC "-/W3C//DTD XHTML1.0 Transitional//EN" 
"http:Wwww.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd"> 。 


笔者 也 曾 被 严格 模式 坑 苦 过 ， 一 直 用 得 好 好 的 HTML 代码 ， 为 什么 变 得 乱七八糟 ? 后 来 
才 发 现 以 前 没有 约束 的 陋习 放 到 严格 模式 下 就 会 出 现 异常 。 也 因为 如 此 ， 这 个 规范 一 度 被 业 
界 所 诉 病 ， 只 是 善良 的 劳动 者 们 逐步 习惯 了 被 约束 的 日 子 。 

W3C 后 来 又 制定 出 更 为 苛刻 的 XHTML1.1 以 及 尚未 完成 的 XHTML2.0， 况 且 W3C 在 后 
续 版 本 中 并 没有 打算 对 早期 版 本 向 后 兼容 ， 或 许 因此 XHTML 至 今 的 名 声 不 再 依旧 。 

随 着 XHTML1.1 在 2001 年 5 月 成 为 W3C 推荐 标准 之 后 ，W3C 便 走 上 了 XHTML 之 
路 。 而 HTMLS5 在 当时 的 W3C 脑海 中 是 完全 没有 影子 的 事情 。 


7.1.2 HTML5 的 前 世 今生 


那么 为 何 HTMLS 现今 又 如 此 辉煌 呢 ? 答 案 是 利益 。W3C 是 一 个 纯粹 为 了 标准 化 而 存在 
的 非 营 利 性 组 织 ， 可 是 它 也 太 过 于 纯粹 而 忽略 了 各 大 浏览 器 厂商 的 利益 。 双 方 在 两 年 多 的 时 
间 里 交涉 未 果 的 情况 下 ， 来 自 苹 果 、Mozilla 基金 会 以 及 Opera 软件 等 浏览 器 厂商 于 2004 年 
成 立 了 WHATWG (Web Hypertext Application Technology Working Group) ， 意 为 网 页 超 文本 
技术 工作 小 组 。 不 难 理解 ， 他 们 意图 回 到 超 文 本 标记 语言 HTML 上 来 。 此 时 的 苹果 公司 刚刚 
成 立 Safari 浏览 器 团队 不 久 ， 可 见 老 乔 当年 的 战略 眼光 。 
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WHATWG 动作 很 快 ， 因 为 他 们 都 是 战斗 在 第 一 线 的 浏览 器 厂商 ， 成 立 后 不 久 就 提出 了 
作为 HTMLS5 草案 前 身 的 Web Applications 1.0， 那 时 候 HTMLS5 还 没有 被 正式 提出 。 

WHATWG 致力 于 Web 表单 和 应 用 程序 ， 而 W3C 专注 于 XHTML2.0。 看 着 自己 被 冷 
的 W3C 在 2006 年 10 月 决定 停止 XHTML 的 工作 并 与 WHATWG 合作 ， 来 创建 一 个 新 版 本 的 
HTML， 并 为 其 建立 一 些 规则 : 


e 新 特性 应 该 基于 HTML、CSS、DOM 以 及 JavaScript。 
减少 对 外 部 插件 的 需求 (比如 Flash) 。 

更 优秀 的 错误 处 理 。 

更 多 取代 脚本 的 标记 。 

HTML 应 该 独立 于 设备 。 

@ 开发 进程 应 对 公众 透明 。 


2007 年 ， 苹 果 、Mozilla 基金 会 以 及 Opera 软件 建议 W3C 接受 WHATWG 的 HTML5， 
正式 提出 将 新 版 HTML 标准 定义 为 HTML5。 于 是 HTMLS 正式 和 大 家 见面 了 。 

随 着 浏览 器 JavaScript 引擎 大 幅 提 速 ， 以 及 人 们 对 HTMLS 预期 逐步 提高 ，JavaScript 的 
流行 度 出 现 了 显著 的 上 升 。 但 那 时 的 HTML5 并 没有 给 人 们 更 多 的 惊喜 。 随 着 每 一 次 
Flashplayer 爆 出 漏洞 、 安 全 、 性 能 之 类 的 负面 新 闻 ， 人 们 对 HTMLS 的 关注 度 又 一 次 大 幅 升 
癌 。 

2007 年 到 2010 年 ， 众 人 在 对 HTML5 失落 和 期 待 反复 交替 的 日 子 中 度 过 。 

2010 年 1 月 ，YouTube 开始 提供 HTML5 视频 播放 器 。 

2010 年 8 月 ，Google 联合 Arcade Fire 推出 了 一 个 HTMLS5 互动 电影 The Wilderness 
Downtown， 此 项 目 由 著名 作家 兼 导演 Chris Milk 创作 。 之 所 以 叫 作 互动 电影 ， 是 因为 在 开始 
时 电影 会 问 你 小 时 候 家 住 在 哪里 ， 而 随后 的 电影 剧情 将 在 这 里 展开 。 电 影 使 用 Arcade Fire 刚 
刚 推 出 的 新 专辑 The Suburbs 中 的 We Used to Wait 作为 主题 音乐 。 一 年 后 ， 该 电影 在 破 纳 广告 
大 奖 赛 中 获得 了 网 络 组 别 的 奖项 。 

2010 年 4 月 ， 乔 布 斯 发 表 公 开 信 “Flash 之 我 见 ”。 引 发 Flash 和 HTMLS5 阵营 之 间 的 空 
前 口水 例 ， 也 刺激 了 浏览 器 厂商 。 

2012 年 1 月 10 日 在 拉 斯 维 加 斯 正在 举行 的 CES 大 会 上 ， 微 软 CEO 鲍 尔 默 宣布 了 基于 
IE 9 和 HTMLS5 版 的 割 绳子 游戏 ， 它 由 微软 及 游戏 开发 商 ZeptoLab 共同 推出 ， 用 于 促进 IE 9 
的 使 用 及 网 页 的 美化 。 

虽然 HTML5 也 在 卖力 地 表现 ， 但 是 面 对 Flash 的 诸多 漏洞 ， 而 HTMLS5 又 迟 迟 难产 ， 急 
性 子 的 WHATWG 和 W3C 最 终 还 是 割 席 分 家 了 。 

2012 年 7 月 ，WHATWG 工作 人 员 在 公告 中 写 道 : “近来 ，WHATWG 和 W3C 在 
HTML5 标准 上 的 分 歧 越 来 越 大 。WHATWG 专注 于 发 展 标准 的 HTMLS5 格式 及 相关 技术 ， 并 
不 断 地 修正 标准 中 的 错误 。 而 W3C 则 想 根 据 自己 的 开发 进程 制作 出 “标准 版 ”HTMLS 标 
准 ， 颁 布 之 后 不 容许 更 改 ， 错 误 也 无 法 修正 ， 所 以 我 们 决定 各 自 研发 。” 





105 


这 样 的 巨变 就 像 王老吉 和 加 多 宝 一 样 ， 从 此 意味 着 将 会 有 两 个 版 本 的 HTML5 一 一 即 
“标准 版 ”和 “living 版 (如 图 7-2 所 示 ) ”。 


HTML 


Living Standard — Last Updated 20 July 2012 





图 7-2 WHATWG 维护 的 living 版 HTML5 





2014 年 10 月 29 日 ， 万 维 网 联盟 宣布 ， 经 过 接近 8 年 的 艰苦 努力 ，HTML5 标准 规范 终 
于 制定 完成 。 
差点 天 折 的 HTMLS 又 经 历 如 此 多 的 坎坷 ， 未 来 到 底 如 何 ， 只 有 拭目以待 。 


7.1.3 HTML5 理念 
HTMLS 的 设计 理念 如 下 : 


。 兼容 性 
e 实用 性 
@ 互通 性 
e@ 访问 性 
存在 即 合理 ， 历 史上 还 是 有 相当 多 的 老 版 HTML 文档 不 能 抛弃 。 化 繁 为 简 是 HTMLS5 最 实 
用 的 改良 ， 无 插件 设计 让 互通 性 大 为 增强 ， 支 持 所 有 语种 让 地 球 村 访问 变 得 如 上 串门 一 般 简单 。 


7.2 HTML5 的 新 特性 


HTML5 发 展 至 今 相 比 HTML4 或 XHTML 也 增加 了 相当 多 的 新 特性 ， 而 支持 这 些 新 特性 
的 浏览 器 也 越 来 越 多 。 本 节 只 列举 一 些 有 代表 性 的 特性 ， 更 多 特性 可 参考 相关 资料 。 


7.2.1 语义 化 


HTML 在 刚 开始 设计 出 来 的 时 候 就 是 带 有 一 定 的 “语义 ”的 ， 包 括 段 落 、 表 格 、 图 片 、 
标题 等 。 随 着 Web 的 发 展 和 搜索 引擎 的 出 现 ， 机 器 要 理解 越 来 越 复杂 的 网 页 显得 力不从心 。 
图 7-3 就 是 HTML5 提倡 的 语义 化 标签 布局 。 
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图 7-3 HTML5 提倡 的 语义 化 标签 


语义 化 不 仅 是 HTML 标签 ， 在 URL 领域 也 提倡 ，CSS 的 命名 也 提倡 ， 甚 至 JavaScript 文 
件 名 、 变 量 名 等 领域 都 提倡 。 
其 中 ，<header> 标 签 和 <footer> 标 签 应 该 是 最 常用 的 ， 用 法 和 <div> 标 记 并 无 不 同 ， 例 如 


<header>...... </header> 
oe oo </footer> 

7.2.2 CSS3 
CSS3 新 增 了 几 大 块 非常 实用 的 特性 。 


@ CSS 选择 器 ， 用 过 jQuery 的 读者 会 更 加 容易 体会 ; 

e RGBA 和 透明 度 ， 要 进行 图 像 处 理 的 读者 会 清楚 它 的 重要 性 ; 

多 栏 布局 ， 排 版 一 直 以 来 是 网 页 重 构 的 重点 ， 无 数 的 切 图 仔 花 费 大 量 时 间 和 精力 在 上 
面 ， 它 的 出 现 意味 着 兄弟 们 延年益寿 ; 

多 背景 图 ， 还 在 为 背景 图 定位 问题 伤 脑筋 吗 ? 这 是 让 你 解脱 的 灵丹妙药 ; 
文字 阴影 ， 以 前 需要 滤 镜 ， 现在 无 须 开 外 挂 啦 ， 都 内 置 ; 

网 络 字体 ，@font-face 属性 让 开发 者 不 再 局 限于 几 个 有 限 的 系统 安装 字体 ; 
圆 角 ， 似 乎 世界 上 最 美的 东西 都 和 图 有关 ; 

边框 图 片 ， 就 像 相框 一 样 ， 纯 色 的 时 代 早 已 过 时 ; 

盒 阴影 ， 阴 影 就 是 为 了 证 明 阳光 的 存在 ; 

媒体 查询 ， 所 谓 响应 式 ， 多 少 都 和 它 有 点 亲 威 关系 。 


还 有 杂七杂八 的 新 特性 在 不 断 添加 中 ， 未 来 是 美好 而 便捷 的 。 
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JavaScript 实战 一 JavaScript、jQuery、HTML5、Nodejs 实例 大 全 (第 2 版 ) 





7.2.3 本 地 存储 /离线 应 用 


相对 于 传统 桌面 软件 ，Web 应 用 无 须 安装 ， 所 占 空间 小 的 特性 使 其 具备 传统 软件 应 用 所 
不 具备 的 优势 ， 然 而 ， 目 前 制约 Web 应 用 最 大 的 问题 在 于 网 络 连接 不 能 够 无 时 不 在 ， 如 飞机 
上 、 汽 车 上 、 火 车 上 ， 有 很 多 地 方 都 无 法 被 网 络 信号 所 覆盖 〈 如 图 7-4 所 示 ) ， 因 此 Web 应 
用 也 就 无 法 使 用 。 


芋 只 © 和 本 
EA 
时 全 应 区 


7-4 Web 无 法 使 用 的 某 些 场所 


如 果 网 络 开发 人 员 要 存储 用 户 的 相关 内 容 ， 他 们 马上 就 会 想到 将 内 容 上 传 到 服务 器 。 
HTML5 改变 了 这 一 点 ， 因 为 现在 有 多 种 技术 可 让 应 用 在 客户 端 设 备 上 保存 数据 。 这 些 数据 
既 可 以 同步 回 服务 器 ， 也 可 以 只 留 在 客户 端 上 ， 有 具体 取决 于 开发 人 员 自 己 ，manifest file 文件 
清单 会 告诉 浏览 器 哪些 文件 需要 缓存 在 本 地 ， 工 作 流程 如 图 7-5 所 示 。 


离线 客户 









CSS 








Jmages < 








Javascrpit 


图 7-5 HTMLS 离线 存储 思维 导 图 
使 用 客户 端 存 储 的 理由 如 下 。 


@ 用 户 可 以 在 离线 状态 下 使 用 你 的 应 用 ， 并 可 以 在 重新 连接 网 络 后 再 同步 回 数 据 ; 

日 客户 端 存储 可 以 提升 性 能 ; 用 户 可 以 在 通过 单 击 访问 你 的 网 站 后 立即 看 到 所 有 数据 ， 
而 无 须 等 待 数据 重新 下 载 ; 

e@ 这 一 编程 模型 更 为 简单 ， 无 须 任何 服务 器 基础 架构 ; 

@ 代替 cookie， 减 少 网 络 数据 传输 。 当 然 ， 数 据 的 安全 性 会 降低 ， 所 以 必须 确保 让 用 户 
知道 自己 在 干什么 。 
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本 书 在 第 12 章 专门 列举 实例 ， 详 细 讲 解 与 此 相关 的 内 容 。 


7.2.4 音频 /视频 多 媒体 


从 本 质 上 来 说 ，HTML4 是 一 个 “静态 ”版 本 ， 要 显示 一 些 音频 和 视频 都 需要 响应 的 插 
件 ， 比 如 著名 的 Flash 和 FlashPlayer 对 互联 网 的 视频 播放 几乎 一 统 江 山 ， 还 有 微软 貌似 天 折 
的 Silverlight。HTMLS5 视频 video 和 音频 audio 元 素 标志 着 Web 视听 时 代 的 到 来 。 

本 书 稍 后 在 第 9 章 将 会 用 整 章 来 介绍 这 样 一 个 实用 的 特性 。 


7.2.5 画布 Canvas 


曾 一 度 被 誉 为 Flash 杀手 ，Flash 内 部 的 一 些 操作 也 是 用 ActionScript 这 样 一 个 类 似 
JavaScript 的 脚本 语言 操作 的 ， 只 是 最 终 会 编译 成 swf 可 执行 文件 来 减少 体积 。HTML5 
Canvas 为 JavaScript 提供 了 一 个 操作 图 形 的 舞台 。 

Canvas 拥有 多 种 绘制 路 径 、 和 矩形 、 圆 形 、 字 符 以 及 添加 图 像 的 方法 。 本 书 也 会 在 第 三 篇 
讲解 这 个 重要 的 革新 。 





7.2.6 本 地 文件 访问 


还 记得 以 前 上 传 一 个 图 片 都 要 弄 到 服务 器 上 去 校 验 大 小 、 压 缩 体 积 、 裁 前 尺寸 吗 ? 而 今 
有 HTML5 的 File System API， 读 者 不 再 需要 下 载 并 且 安装 其 他 多 余 的 软件 就 可 以 管理 和 操 
作 电 脑 里 的 文件 。 还 在 郁 问安 装 Window 7 要 用 10GB 的 硬盘 吗 ? 或 许 Web OS 时 代 的 来 临 真 
的 不 远 了 ! 


7.2.7 开放 字体 格式 WOFF 


WOFF 的 全 称 是 Web 开放 字体 格式 (Web Open Font Format) ， 是 网 页 所 采用 的 一 种 字 
体格 式 标准 。 此 字体 格式 发 展 于 2009 年 ， 现 在 正 由 万 维 网 联盟 的 Web 字体 工作 小 组 标准 
化 ， 以 求 成 为 推荐 标准 。 此 字体 格式 不 但 能 够 有 效 利用 压缩 来 减少 文件 大 小 ， 并 且 不 包含 加 
密 也 不 受 DRM (数字 著作 权 管理 ) 限制 ， 文 件 一 般 比 TTF 小 40%， 非 常 适合 网 络 传播 ， 是 

-种 单一 、 可 交互 的 字体 。 

WOFF 的 出 现 可 以 使 精装 字体 排版 在 网 络 上 得 以 实现 ， 这 意味 着 设计 团队 可 以 更 加 专注 

于 文字 和 文本 的 建设 ， 不 但 看 起 来 不 错 ， 而 且 能 够 优化 搜索 引擎 。 
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7.2.8 地 理 位 置 


地 理 定位 是 HTML5 提供 的 最 令 人 激动 的 特性 之 一 ， 时 下 到 处 都 是 LBS， 即 基于 位 置 的 
服务 (Location Based Service) 。 

用 相对 简单 的 JavaScript 代码 ， 可 以 创建 出 能 确定 用 户 地 理 位 置 详细 信息 的 Web 应 用 ， 
包括 经 纬度 以 及 海拔 等 ， 还 能 设计 出 一 些 甚至 通过 监控 用 户 位 置 随时 间 的 移动 来 提供 导航 功 
能 的 Web 应 用 。 

Geolocation API 用 于 将 用 户 当前 地 理 位 置信 息 共享 给 信任 的 站 点 ， 这 涉及 用 户 的 隐私 安 
全 问题 ， 所 以 当 一 个 站 点 需要 获取 用 户 的 当前 地 理 位 置 时 ， 浏 览 器 会 提示 用 户 是 “允许 ”或 

最 简单 的 获取 地 理 位 置 的 代码 如 下 : 





navigator.geolocation.getCurrentPosition (function(){ 
// 获取 成 功 要 做 的 事情 .. . 

}, function(){ 
// 获取 失败 要 做 的 事情 .. . 

},l 
// 指示 浏览 器 获取 高 精度 的 位 置 ， 默 认为 false 
enableHighAcuracy: true, 
// 指定 获取 地 理 位 置 的 超时 时 间 ， 默 认 不 限时 ， 单 位 为 毫秒 
timeout: 5000, 
// 最 长 有 效 期 ， 在 重复 获取 地 理 位 置 时 ， 此 参数 指定 多 久 再 次 获取 位 置 
maximumAge: 3000 

YR 


7.2.9 微 数 据 


HTML5 微 数 据 规范 是 标记 内 容 的 一 种 方式 ， 用 于 描述 特定 的 信息 类 型 ， 如 评论 、 人 物 
信息 或 活动 。 每 种 信息 都 描述 特定 类 型 的 项 ， 如 和 人物、 活动 或 评论 ， 活 动 可 以 包含 venue、 
starting time、name 和 category 属性 。 

上 面 是 Google 中 的 解释 ， 通俗 地 说 ， 微 数据 是 在 类 似 span、div 的 标签 内 添加 属性 ， 让 
机 器 〈 如 搜索 引擎 ) 识别 其 意义 ， 一 些 特定 类 型 的 信息 ， 例 如 评论 、 人 物 信息 或 事件 都 有 相 
应 的 属性 ， 用 来 描述 其 意义 。 

以 下 是 用 微 数据 标记 的 HTML 内 容 : 

<div itemscope itemtype="http://data-vocabulary.org/Person"> 

我 的 名 字 是 <span itemprop="name"> 张 三 封 </span> 
但 大 家 叫 我 <span itemprop="nickname"> 三 封 </span>。 
我 的 主页 是 : 


<a href="http://z3f.me" itemprop="url">z3f.me</a> 


110 


我 住 在 东莞 市 。 我 是 <span itemprop="title"> 前 端 工程 师 </span>。 
</div> 


7.2.10 XMLHttpRequest Level 2 

作为 XMLHtttpRequest 的 改进 版 ，XMLHttpRequest Level 2 在 功能 上 有 了 很 大 的 增强 。 
它 能 够 通过 跨 域 在 客户 端 自行 整合 不 同 源 的 内 容 ， 如 果 目 标 服务 器 允许 ， 还 可 以 使 用 用 户 证 
书 访问 受 保护 的 内 容 。 

新 版 XMLHttpRequest 最 重要 的 一 项 改进 是 增加 了 对 进度 的 响应 事件 progress， 顾 名 思 
义 ， 通 过 这 个 进度 事件 可 以 更 友好 地 完成 复杂 的 业务 操作 。 

还 增加 了 timeout 属性 ， 可 以 设置 HTTP 请 求 的 时 限 。 


var xhr = new XMLHttpRequest(); // 创 建 对 象 
xhr.timeout = 3000; //3000 毫秒 


上 面 的 语句 将 最 长 等 待 时 间 设 为 3 秒 。 过 了 这 个 时 限 ， 就 自动 停止 HTTP 请 求 。 与 之 配 
套 的 还 有 一 个 timeout 事件 ， 用 来 指定 回调 函数 。 





xhr.ontimeout = function(event){ 
alert (' 请 求 超时 ! '); 
} 


7.2.11 新 的 HTML Forms 


XForms 是 W3C 工作 组 研究 的 一 个 以 XML 为 核心 、 功 能 强大 却 略 显 复杂 的 标准 ， 它 用 
于 规范 客户 端 表单 的 行为 ， 已 有 近 十 年 的 历史 。XForms 需要 利用 XML Schema， 遗 憾 的 是 ， 
在 没有 安装 插件 的 情况 下 很 多 主流 浏览 器 均 不 支持 XForms。 或 许 是 对 XML 的 过 于 执着 ， 
WHATWG 才 和 W3C 闹 别 扭 。WHATWG 一 心 想 兼容 一 些 旧 的 HTML 标签 ， 包 括 Forms 相关 
的 标签 ， 所 以 在 此 基础 上 扩展 出 一 些 向 下 兼容 的 新 的 HTML Forms 标签 。HTML5 Forms 不 是 
XForms 。 

接 下 来 在 第 8 章 将 要 讨论 到 的 input 标签 新 增 了 好 几 种 类 型 。 老 版 浏览 器 无 法 识别 这 些 新 
类 型 也 没有 关系 ， 可 以 降级 显示 。 更 多 细节 可 参考 第 8 章 的 内 容 。 


7.2.12 其 他 特性 及 未 来 发 展 


还 有 一 些 HTML5 的 新 特性 ， 比 如 : 


@ 拖 提 一 一 鼠标 拖 放 一 些 文件 到 HTMLS5 网 页 等 事件 处 理 机 制 。 
e MathMIL 一 一 用 来 在 互联 网 上 书写 数学 符号 和 公式 的 置 标语 言 。 
@ Server-Sent Events 一 一 用 来 从 服务 器 向 客户 端 浏览 器 推送 消息 。 


i 


WebSocket 一 一 服务 器 和 客户 端 可 以 彼此 相互 推送 信息 且 允 许 跨 域 。 

Web Workers 一 一 为 Web 前 端 网 页 上 的 脚本 提供 了 一 种 能 在 后 台 进 程 中 运行 的 方法 。 
Selectors API 一 一 类 似 jQuery 的 查询 页 面 元 素 的 接口 。 

JSON 一 一 HTML5 应 用 内 置 数据 交换 格式 。 


未 来 HTML5 可 能 会 有 什么 东西 呢 ? 


e WebGL 一 一 大 名 易 易 的 OpenGL 可 能 有 网 页 版 ， 让 3D HTML 不 再 复杂 。 
@ _ Device 一 一 电脑 硬件 设备 的 访问 ， 如 摄像 头 、 考 克 风 、 存 储 器 等 。 

e 触摸 事件 一 一 随 着 移动 应 用 的 兴起 ， 这 些 需求 会 更 大 。 

e P2P 一 一 多 人 游戏 和 多 方 通信 ，P2P 是 不 二 选择 。 


请 对 HTMLS 未 来 充满 信心 ， 它 是 一 个 包罗 万 象 的 技术 大 集合 ， 其 丰富 的 设计 ， 总 有 一 
款 适 合 你 。 





7.3 有 哪些 浏览 器 支持 HTML5 


随 着 时 间 的 推移 ， 支 持 HTML5 的 浏览 器 越 来 越 多 ， 但 目前 来 看 还 没有 完全 支持 HTML5 
的 浏览 器 。 

2012 年 年 底 时 ， 国 产 浏览 器 开始 过 一 个 HTML5 跑 分 大 战 ， 各 大 知名 浏览 器 相继 投入 战 
斗 ， 最 终 诞生 了 一 个 高 分 王 一 一 傲游 浏览 器 4， 它 至 今 都 还 是 超过 Chrome 而 排行 第 一 的 国产 
浏览 器 ， 如 图 7-6 所 示 。 

















图 7-6 HTMLS 支持 率 排行 榜 


最 新 版 本 的 Safari、Chrome、Firefox 以 及 Opera 支持 某 些 HTML5 特性 。IE 11 支持 小 部 
分 HTMLS 特性 ， 具 体 如 图 7-7 所 示 。 
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图 7-7 各 种 主流 浏览 器 对 HTML5 的 支持 率 


图 7-7 是 caniuse.com 提供 的 针对 HTML5 和 CSS3 支持 率 的 全 球 浏览 器 综合 对 比 统计 
表 。 读 者 可 自己 去 查看 最 新 情况 。 


7.4 如 何 书写 HTML5 


HTML5 是 能 够 兼容 以 前 常用 的 div 等 早期 版 本 的 标签 的 ， 所 以 HTMLS 的 书写 没有 特别 
的 不 同 ， 相 对 而 言 还 简化 了 不 少 东 西 ， 只 是 它 支持 以 前 版 本 没有 的 标签 。 


7.4.1 HTML5 和 XHTML 的 对 比 


1. 文档 声明 简化 
XHTML 中 这 样 写 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 


HTML5 中 这 样 写 : 

<!DOCTYPE html> 

2. html 标签 上 不 需要 声明 命名 空间 

XHTML 中 这 样 写 : 

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 
HTML5 中 这 样 写 : 


<html lang="zh-CN"> 
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3. 字符 集 编码 声明 简化 

XHTML 中 这 样 写 : 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
HTML5 中 这 样 写 : 
<meta charset="UTF-8" /> 

4. style 和 script 标签 type 属性 简化 

XHTML 中 这 样 写 : 


<script type="text/javascript"></script> 
<style type="text/css"></style> 


HTML5 中 这 样 写 : 


<script></script> 
<style></style> 


5. link 标签 连接 ICON 图 片 时 可 指定 尺寸 
XHTML 中 这 样 写 : 


<link rel="shortcut icon" href="http://z3f.me/favicon.ico" type="image/ 
x-icon” /> 


HTMLS5 中 这 样 写 : 


<link rel="icon" href="http://z3f.me/favicon.gif" type="image/gif" 

sizes="16x16" /> 

除 此 之 外 ，HTML5 没有 像 XHTML 那样 严格 要 求 标签 闭合 问题 。 对 XHTML 不 建议 使 
用 的 b 和 i 等 标签 进行 重 定义 ， 使 其 拥有 语义 特征 。 

@ b 元 素 现在 描述 为 在 普通 文章 中 仅 从 文体 上 突出 的 不 包含 任何 额外 的 主要 性 的 一 段 文本 。 

@ i 元 素 现在 描述 为 在 普通 文章 中 突出 不 同意 见 或 语气 或 其 他 的 一 段 文本 。 

@ u 元 素 现在 描述 为 在 普通 文章 中 仅 从 文体 上 突出 有 语法 问题 或 是 中 文 专用 名 称 的 一 段 

文本 。 


7.4.2 HTML5 书写 的 误区 

不 要 使 用 <section> 作 为 <div> 的 奉 代 。 简 单 来 说 ，<section> 是 内 容 容器 ，<div> 是 样式 容 
器 。 需 要 布局 或 提供 内 容 额外 样式 的 话 ， 还 是 要 用 <div>。 

<header> 潍 用 时 ， 一 个 网 页 中 可 出 现 多 个 <heade 记 标签。 语义 类 标签 都 是 内 容 容 器 ， 而 非 
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样式 容器 。 很 多 网 页 把 <header> 拿 来 做 布局 使 用 ， 虽 然 语法 可 以 接受 ， 但 是 和 设计 初衷 不 符 。 
不 是 所 有 页 面 上 的 链接 都 需要 放 在 <nav> 标 签 中 ， 这 个 标签 本 意 是 用 作 主 要 的 导航 
块 。 一 个 网 页 会 有 很 多 链接 ， 不 是 都 需要 放 在 <nav> 标 签 里 。 
<figure> 标 签 不 仅 用 于 图 片 的 图 解 、 说 明 、 补 充 ， 也 用 于 其 他 具有 文档 类 型 的 文件 。 
由 于 HTML5 标准 非常 庞大 ， 这 里 只 是 简单 地 抛砖引玉 ， 需 要 读者 根据 实际 项 目 需求 去 
抉择 。 





Xl 





7.5 相关 参考 


® https://www.swordair.com/docs/html5-differences-from-html4/ 一 一 HTML5 相对 于 
HTML4 的 差异 。 

https://zh.wikipedia.org/wiki/HTML _5 一 一 维基 百科 关于 HTMLS 的 介绍 。 

® https:/www.w3.org/html/logo/ 一 一 W3C 提供 的 HTML5 华丽 LOGO。 

® http://www.thewildernessdowntown.com/ 一 一 Google 联合 Arcade Fire 推出 的 HTML5 互 
动 电影 。 

® https://support.google.com/webmasters/answer/176035 一 一 Google 关于 微 数据 的 介绍 。 

@ https://www.w3.org/TRIHTML5/ 一 一 W3C 提供 的 HTMLS 标准 最 新 版 。 
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第 8 章 焕然 一 新 的 表单 


“我 有 个 朋友 ， 每 次 见 到 我 都 说 要 建 个 网 站 。 三 年 过 去 ， 什 么 动静 都 没有 。 以 后 他 再 和 
我 说 同样 的 话题 ， 我 就 毫 不 客气 ， 立 刻 打 断 他 。?” 





要 建 一 个 网 站 ， 光 说 不 练 是 不 行 的 。 要 是 没有 表单 ， 也 几乎 不 可 能 。 在 第 7 章 初步 认识 
HTML5 后 ， 根 据 表 单 在 前 端 工作 中 的 重要 性 ， 下 面 介绍 一 下 HTML5 Forms 中 新 增 的 几 个 比 
较 重要 的 控件 。 

本 章 主要 知识 点 : 

e@ 浏览 器 内 核 与 域名 

@ 数值 输入 和 日 期 选择 器 

@ 自动 提示 


8.1 E-mail 和 URL 类 型 的 输入 元 素 


E-mail 和 URL 类 型 是 浏览 器 在 HTML5 之 路 上 最 早 支 持 的 几 个 特性 之 一 ， 因 为 它们 确实 
有 广泛 的 用 途 ， 现 实 来 讲 ， 必 然 要 优先 支持 多 数 群体 的 需求 。 在 讲解 之 前 要 先 了 解 一 下 浏览 
器 内 核 的 市 场 情况 ， 然 后 介绍 域名 的 一 些小 知识 。 





8.1.1 各 浏览 器 内 核 一 览 


浏览 器 内 核 主要 有 3 种 ， 分 别 是 微软 IE 用 的 Trident; 由 网 景 公司 开发 ， 现 在 Firefox 使 
用 并 维护 的 Gecko 内 核 ;， 还 有 苹果 公司 开发 的 Webkit 内 核 。 表 8-1 列举 了 一 些 主流 浏览 器 采 
用 的 内 核 。 














表 8-1 常见 浏览 器 内 核 





浏览 器 Trident 内 核 Gecko 内 核 | Webkit 内 核 | 其 他 说 明 


Ha | | 一 





Chrome 





浏览 器 。 | Trident 内 核 | Gecko 内核 | Webkit 内 核 | 其 他 说 明 | 
Safari y | 
Opera V 在 12.16 版 后 开始 使 用 Webkit 内 核 











UC V 基于 Webkit 打造 出 U3 内 核 ， 手 机 浏览 器 





Trident (又 称 为 MSHTML) ， 是 微软 的 Windows 系统 搭载 的 网 页 浏览 器 一 一 Internet 
Explorer 的 排版 引擎 的 名 称 ， 它 的 第 一 个 版 本 随 着 1997 年 10 月 Internet Explorer 4 释 出 ,之 
后 不 断 加 入 新 的 技术 并 随 着 新 版 本 的 Internet Explorer 释 出 。 在 Internet Explorer 7 中 ， 微 软 对 
Trident 排版 引擎 做 了 重大 改动 ， 除 加 入 新 的 技术 之 外 ， 还 增加 了 对 网 页 标准 的 支持 。 

Gecko 是 一 套 开放 源 代 码 、C++ 编 写 的 网 页 排版 引擎 。 目前 为 Mozilla 家 族 网 页 浏览 器 以 
及 Netscape 6 以 后 版 本 浏览 器 所 使 用 。 该 引擎 原本 是 由 网 景 通信 公司 开发 的 ， 现 则 由 Mozilla 
基金 会 维护 。 国 外 还 有 很 多 基于 Gecko 内 核 的 浏览 器 ， 比 如 Firefox Aurora、Pale Moon 浏览 
器 、Waterfox 水 狐 浏 览 器 、Comodo IceDragon 冰 狐 浏览 器 等 。 

Webkit 内 核 原本 由 Safari 开发 ， 后 来 Google 采用 并 研发 出 Chromium 开源 版 ， 通 常 说 的 
Chrome 是 基于 Chromium 项 目的 ， 国 内 很 多 极速 、 高 速 、 双 核 浏览 器 都 是 使 用 Chromium 开 
源 项 目 版 本 ， 只 是 习惯 上 称 之 为 Webkit 内 核 。 

还 有 一 款 叫 Presto 的 浏览 器 内 核 ， 它 是 一 款 商业 浏览 器 内 核 ， 仅 Opera 在 使 用 ， 现 在 
Opera 已 经 停止 了 它 的 开发 ， 所 以 未 将 其 列 入 。 

浏览 迷 《〈1liulanmi.com) 一 一 一 个 浏览 器 主题 网 站 ， 有 各 种 浏览 器 资料 、 测 评 和 下 载 。 读 
者 若 有 兴趣 可 去 访问 ， 可 从 中 了 解 最 新 的 浏览 器 市 场 占有 率 信 息 。 





























8.1.2 各 浏览 器 对 E-mail 和 URL 类 型 的 支持 情况 


由 于 各 家 浏览 器 开发 进度 不 同 ， 对 HTML5 的 支持 也 各 不 相同 ， 所 以 并 不 是 所 有 浏览 器 
都 支持 E-mail 和 URL 类 型 。 

如 何 查看 浏览 器 对 HTMLS5 的 支持 呢 ? 很 简单 ， 只 要 用 浏览 器 访问 HTML5test.com 就 能 
看 到 相应 的 结果 。 如 图 8-1 所 示 是 火狐 和 谷歌 浏览 器 的 支持 情况 。 


TF 











图 8-1 火狐 和 谷歌 浏览 器 对 HTML5 Forms 的 支持 


8.1.3 全 球 项 级 域名 


电子 邮件 地 址 的 格式 由 3 部 分 组 成 : 第 一 部 分 “USER” 代 表 用 户 信箱 的 账号 ， 对 于 同 
-个 邮件 接收 服务 器 来 说 ， 这 个 账号 必须 是 唯一 的 ， 第 二 部 分 “@” 是 分 隔 符 ， 第 三 部 分 是 
用 户 信箱 的 邮件 接收 服务 器 域名 ， 用 以 标志 其 所 在 的 位 置 。 
邮件 服务 器 域名 是 电子 邮件 必 不 可 少 的 组 成 部 分 。 世 界 上 国家 数量 不 算 少 ， 每 个 国家 都 
有 一 个 顶级 国家 域名 ， 有 一 些 知名 地 区 也 被 分 配 了 项 级 域名 ， 如 香港 为 .hk、 台 湾 为 .tw、 澳 门 
为 .mo， 还 有 其 他 性 质 的 域名 ， 如 亚洲 .asia。 笔 者 收集 了 一 些 项 级 域名 ， 参 见 表 8-2。 


表 8-2 全 球 顶 级 域名 简 表 
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国际 通用 项 级 域名 








科 科 斯 群岛 .cc 阿塞拜疆 .az 坦 kg 卡塔尔 .qa 


大 洋 洲 





.DZ 


[wmw mm mi nme | em | | 
北美 洲 


圣文森特 和 格林 | 安 提 瓜 和 巴 布 特 立 尼 达 和 多 
We ea ee | 
南美 洲 


www mm em [esw | | 








[ass je ml | | 1 
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邮件 服务 器 域名 通常 也 是 Web 服务 器 的 域名 ， 比 如 通过 邮箱 xx@qq.com 中 的 
“qq.com” 也 是 能 直接 访问 腾讯 官网 的 。 

曾经 火 极 一 时 的 51.1a 统计 是 使 用 老挝 的 国家 顶级 域名 ， 笔 者 的 个 人 主页 z3f.me 使 用 的 
是 黑山 (南斯拉夫 解体 后 的 独立 出 来 的 ) 的 国家 顶级 域名 。 不 过 很 多 国家 项 级 域名 年 费 都 不 
便宜 。 价 值 最 高 的 顶级 域名 当 属 com， 因 为 它 的 普及 和 认可 度 非 常 高 。 


8.1.4 E-mail 类 型 的 使 用 

用 下 面 的 代码 就 可 以 创建 一 个 E-mail 类 型 的 <input> 标 签 。 

<input type="email"/> 

这 样 使 用 时 ， 只 是 在 输入 的 时 候 验 证 是 否 符合 最 简单 的 E-mail 格式 ， 在 设置 默认 值 的 时 
候 依然 用 value 属性 。 

<input type="email" value="xx@qq.com"/> 

当 value 为 空 或 没有 这 个 属性 时 ，placeholder 设置 的 内 容 才 会 被 显示 。 

<input type="email" value="" placeholder=" 请 输入 E-mail， 如 : xx@qq.com"/> 


图 8-2 是 placeholder 显示 的 效果 ， 灰 灰 的 字体 颜色 。 这 里 需要 注意 ，placeholder 默认 不 
是 灰色 ， 而 是 <input> 标 签 的 color 样式 设置 的 颜色 60% 透 明度 的 效果 ， 所 以 如 果 color 不 是 默 
认 的 黑色 而 是 红色 ， 那 么 placeholder 显示 的 则 是 淡 红 色 。 


NTRLS Fores ~ Norilla Firefox 






HIMLS Forms 





| Smus rs 








过 团 file:///0:/TSBOOK/08/06.htel 四 cj $ | 0 国 6lo//10:/TSBo0Koa/os htnl 








图 8-2 placeholder 在 FireFox 下 的 效果 


这 是 一 个 很 有 用 的 属性 ， 另 外 ， 还 有 一 个 设置 光标 的 属性 也 非常 有 用 ， 它 是 autofocus。 
<input type="email" autofocus="autofocus"/> 


当 同 时 设置 了 placeholder 和 autofocus 时 ，placeholder 会 被 显示 ， 光 标 也 会 在 输入 框 中 闪 
烁 ， 即 获得 了 焦点 。 如 果 设 置 了 value 值 ， 光 标 会 在 第 一 个 字符 前 面 而 不 是 在 最 后 面 。 如 果 
一 个 页 面 中 有 多 个 <inpu 人 标签 设置 了 autofocus， 在 不 同 浏览 器 下 光标 的 位 置 是 不 同 的 ， 比 如 
Firefox 会 将 光标 定位 在 第 一 个 设置 元 素 上 ， 而 Chrome 则 定位 在 最 后 一 个 设置 元 素 上 。 
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E-mail 通常 是 必 填 项 目 ， 这 时 候 required 属性 就 派 上 用 场 了 ， 它 会 告诉 表单 在 提交 时 检 
查 元 素 是 否 填写 。 

<input type="email" required="required"/> 

除 必 填 项 之 外 ， 有 时 候 还 需要 更 加 复杂 的 验证 ， 比 如 E-mail 的 格式 和 长 度 ， 甚 至 仅 限 某 
个 域名 等 ， 这 时 候 就 要 用 pattern 属性 才能 完成 任务 。 

<input type="email" pattern=".+z3f\.me$"/> 


上 面 代码 用 pattern 属性 限制 只 能 用 z3f.me 结尾 的 E-mail 地 址 。pattern 实际 上 就 是 执行 
正则 表达 式 。 


8.1.5 URL 类 型 的 使 用 

使 用 URL 类 型 的 <input> 标 签 和 使 用 E-mail 类 型 差不多 。 

<input type="ur1l"/> 

同样 支持 E-mail 类 型 的 属性 。 只 是 URL 类 型 的 基本 验证 需要 有 protocol 协议 头 ， 比 如 
http:、file: 和 ftp: 等 。 

不 同 的 浏览 器 对 验证 的 执行 效果 和 提示 效果 都 不 一 样 ， 如 图 8-3 所 示 ，Firefox 会 在 失去 
焦点 时 描 红 边框 提示 ， 而 Chrome 则 没有 类 似 行为 ， 它 需要 在 提交 时 才 提 示 。 







文件 里) 颖 辑 刀 ”查看 中 历史 民 ) 书签 到 ) 
[cms 园 





Im 








ITCTTTTT 本 





m, FE 





en /svn hm 二 加 








mL: 同志 本 
UL，Fee | 景 基本 有 请 输入 网 址 。 


请 的 和 一 个 mL | 





图 8-4 浏览 器 不 同 的 提示 效果 
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8.2 数值 输入 


数值 输入 是 很 常见 的 一 个 控件 ， 在 没有 HTMLS 之 前 ， 大 家 都 使 用 各 种 标签 加 上 不 同 的 
脚本 来 模拟 ， 日 子 过 得 苦 不 堪 言 ， 现 在 终结 者 来 了 ， 它 就 是 number 类 型 的 <inpuP 标 签 。 


8.2.1 各 浏览 器 对 number 类 型 的 支持 情况 
各 浏览 器 对 number 类 型 的 支持 情况 如 表 8-3 所 示 。 
表 8-3 各 浏览 器 对 number 类 型 的 支持 情况 








8.2.2 number 类 型 的 属性 与 使 用 
Chrome 支持 的 效果 如 图 8-5 所 示 。 


HIMLS Forns x 改 汪 


人 C 





图 8-5 number 类 型 的 input 





Number 类 型 有 几 个 专 有 的 属性 ， 如 表 8-4 所 示 。 
表 8-4 number 类 型 特有 属性 及 其 描述 




















属性 描述 
和 规定 允许 的 最 大 值 
i | 规定 允许 的 最 小 人 
We 规定 合法 的 数字 间隔 (如 果 step-"3"， 则 合法 的 数 是 3、0、3、6 等 ) 
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同 其 他 <inpu 人 标签 一 样 ， 使 用 number 类 型 也 非常 简单 。 
<input type="number" value="50" min="10" step="5" max="100"/> 


上 面 的 代码 设置 了 一 个 初始 值 50， 每 次 增 减 5， 最 大 不 超过 100， 最 小 不 低 于 10。 


8.3 日 期 选择 器 

日 期 选择 器 算得 上 是 一 个 复杂 的 控件 ， 在 HTML4 时 代 ，my97datepicker 是 做 得 最 好 的 国 
产 日 期 选择 器 控件 之 一 。 现 在 HTML5 准备 内 置 ， 可 能 是 使 用 频率 太 高 且 较 为 复杂 的 缘故 。 
8.3.1 各 浏览 器 对 日 期 选择 器 的 支持 情况 


日 期 选择 器 包括 只 有 年 月 日 的 date 类 型 、 包 含 年 月 日 和 时 分 的 datetime 类 型 、 仅 有 时 间 
的 time 类 型 和 选择 周 的 week 类 型 。 在 笔者 写 稿 时， 各 浏览 器 的 支持 情况 如 表 8-5 所 示 。 


表 8-5 各 浏览 器 对 日 期 选择 器 的 支持 情况 


特性 

input type=date 

input type=datetime 
input type=datetime-local 
input type=time 

input type=week 








input type=month 





其 中 datetime 表示 UTC 时 间 ，datetime-local 表示 本 地 时 间 。 表 8-6 中 列 出 的 是 PC 端 浏 
览 器 ， 在 移动 端 也 有 很 多 不 支持 ， 不 过 主流 的 UC 浏览 器 是 支持 的 。 
8.3.2 日 期 选择 器 类 型 与 使 用 


日 期 选择 器 的 使 用 同样 非常 简单 ， 只 要 按照 前 面 的 方法 ， 修 改 <input> 标 签 的 type 属性 即 
可 。 复 杂 的 功能 可 以 简单 实现 ， 所 以 笔者 直接 截图 说 明 。 


<input type="date" /> <!-- 定 义 日 期 字段 ， 请 看 图 8-6 和 图 8-7--> 
<input type="datetime" /> <!-- 定 义 日 期 和 时 间 字 段 ， 傲 游 浏览 器 支持 ， 


效果 和 datetime-local 类 型 相似 --> 
<input type="datetime-local" /> <!-- 定 义 日 期 和 时 间 字 段 ， 请 看 图 8-8--> 
<input type="month" /> <!-- 定 义 日 期 字段 的 月 ， 请 看 图 8-9--> 
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<input type="time" /> 
<input type="week" /> 


Date 类 型 ， [name x 可 v 


2014 年 01 月 ~ 


datetine 类 还 | 星 区 星期 星 央 星期 星期 星期 星期 | 
五 六 


提交 10 11 


17 18 
24 25 
31 


[DD mL Forns 
€ C 


datetime-local 类 型 , 


上 配 强 -月 -9H 00:02 x 可 v 


2013 年 07 月 ~ 4 | 四 | 





星期 星期 星期 星期 星期 星期 星期 
子 加 五 友 
10 11 12 13 
17 18 19 20 
24 25 26 | 27 
31 











GDfile:// 安 





time 类 型 ， [23:01 x 司 


图 8-10 Chrome 的 time 日 期 选择 器 


加 


<!-- 定 义 日 期 字段 的 时 、 分 ， 请 看 图 8-10--> 
<!-- 定 义 日 期 字段 的 周 ， 请 看 图 8-11--> 





















| | | 
EE 
E23 WwW 1 2 3 4 5 56 
1T #0 

和 

1 2 2 4 »3 2 
Bm 2 

1 5 5 7 8 9 1 














DD mLs Forns 


€ SC Dfile:///D:/JsBO0k/08/08.17? 三 
引 


month 类 型 ， [EGGFO X 可 7 


2014 年 01 月 ~ 





星期 星期 星期 星期 
1 4 
| 
4 16 17 
22 23 24 
29 30 31 











言 © Dfile:///0:/JsBook/08/08,htnl 安 


meck 型 ， 国生 0 月 x 到 v 


2014 征 01 月 








用 
2 
3 
4 








8-11 Chrome 的 week 日 期 选择 器 








8.4 用 datalist 来 实现 自动 提示 


自动 提示 有 时 候 也 叫 自动 完成 ， 主 要 是 在 填写 表单 的 时 候 用 来 联想 输入 ， 比 如 百度 首页 
的 搜索 框 ， 输 入 时 下 面 会 给 出 智能 联想 提示 。 到 目前 为 止 ， 很 多 Web 网 站 都 是 自己 编写 
JavaScript 控件 来 模拟 ， 一 般 都 要 写 上 上 百 行 或 者 更 多 的 代码 。HTML5 提供 的 datalist 控件 能 
够 省 去 很 多 开发 成 本 ， 是 较为 好 用 的 改进 之 一 


8.4.1 各 浏览 器 对 datalist 的 支持 情况 


表 8-6 中 的 list 是 <input> 标 签 的 属性 ， 也 就 是 说 ，<datalist> 一 般 要 和 <input> 的 list 属性 
-起 使 用 。 在 8.4.3 小 节 会 对 此 进行 具体 讲解 。 
表 8-6 各 浏览 器 对 datalist 标签 的 支持 情况 
IE 10 以 上 Firefox Opera Chrome 


datalist> EE FE 
i | 





8.4.2 各 浏览 器 datalist 的 效果 对 比 


datalist 在 浏览 器 下 的 显示 效果 大 致 相似 ， 仅 有 部 分 体验 上 的 差别 。 图 8-12 所 示 是 
Firefox 和 Chrome 的 对 比 。 


Rirefox | rui: 





datalist 标 签 ， 


人 mr | 


datalist 标 签 : 


修改 日 期 : 2013-07-23 
J Hus r 


图 8-12 datalist 在 不 同 浏览 器 中 的 效果 
Chrome 在 处 理 上 似乎 要 稍 逊 色 一 些 ， 所 以 在 设计 程序 的 时 候 ， 要 避免 出 现 这 样 的 情况 ， 


即 返 回 的 数据 项 不 能 太 多 。 另 外 ， 这 些 datalist 痢 可 能 会 超出 浏览 器 边界 而 不 是 增加 滚动 条 
的 高 度 。 能 够 受 文档 宽度 的 约束 越界 ， 一 般 表 示 由 浏览 器 控件 提供 这 种 功能 ， 所 以 在 datalist 

















125 


弹出 的 界面 上 ， 通 过 鼠标 右键 无 法 显示 出 常用 的 网 页 右键 菜单 ， 并 且 无 法 通过 CSS 控制 其 显 
示 的 部 分 。 


8.4.3 datalist 让 input 自动 提示 更 智能 


对 浏览 器 而 言 ， 很 早 就 实现 了 表单 自动 完成 功能 ， 只 是 那 时 的 提示 是 用 户 曾 输入 的 信 
息 。 对 于 需要 加 工 的 提示 则 无 法 满足 ， 如 输入 电子 邮件 地 址 。 因 为 邮件 地 址 有 固定 格式 且 能 
够 列举 一 些 常用 的 ， 通 过 用 户 输入 前 面 的 一 部 分 而 组 装 出 完整 的 地 址 来 ， 这 时 自动 完成 就 无 
法 再 加 工 处 理 ， 这 里 我 们 来 看 看 datalist 是 如 何 进 行 补足 的 。 

首先 创建 一 个 HTMLS 的 网 页 基本 结构 ， 放 入 一 个 普通 的 <input> 标 签 ，type 是 text 类 
型 ， 再 加 入 一 个 <datalist> 标 签 ， 设 置 id 为 lst， 再 把 <input> 标 签 的 list 属性 设置 为 <datalist> 标 
签 的 id， 以 此 关联 起 来 。 

接 下 来 需要 加 入 一 些 JavaScript 代码 ， 监 听 <input> 的 输入 事件 ， 在 输入 的 时 候 通 过 已 定 
义 好 的 数据 构造 出 提示 信息 <option>， 最 后 赋值 给 <datalisP> 标 签 。 详 细 过 程 请 看 【范例 8-1】 的 
代码 。 


【范例 8-1 datalist 让 input 自动 提示 更 智能 】 


<!DOCTYPE html> 
<html> 
<head> 
<title>HTMLS5 Forms</title> 
<script src="../base.js"></script> 
</head> 
<body> 
<form> 
你 的 邮箱 : <input id="umail" list="lst" autocomplete="off"/><br/><br/><br /> 
. <datalist id="lst"></datalist> 
«</form> 
。 <script> 
. var datalist = ["qq.com","163.com","gmail.com","sina.com","126.com","z3f. 





ownaoum 必 wm 


FF FF 
UN PP 口 


me"]; 


。Var umail = eg.$ ("umail"); 
. var lst = eg.$("lst"); 


Pm 
a 


16. eg.addListener (umail,"input",function(){  // 绑 定 在 输入 事件 上 

下 lst.innerHTML=""; // 清 空 ， 即 不 提示 

TB var k = umail.value; // 获 取 输 入 的 值 

9 if(k.indexof("e")>-1) return;  ”// 如 果 已 经 有 输入 就 不 再 动态 构造 ， 否 则 陷入 死 循环 
20 SEAEE "returny // 清 空 之 后 也 不 提示 

2 Var newStr = ""; 

2 for (var i=0;i<datalist.length;i++){ 

23 newStr+='<option value="'+k+"@"+datalist[i]+'" />'; // 构 造 
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24. 
25- 
26. 
2 
28% 
2 


’ 
lst.innerHTML=newStr; // 赋 值 


Ds; 
</script> 
</body> 
</html> 


<datalist> 标 签 的 HTML 用 代码 第 25 行 这 样 的 方式 改变 后 ， 会 触发 提示 列表 的 显示 ， 反 
用 第 17 行 这 样 的 方式 清空 后 会 隐藏 。 细 心 的 读者 可 能 会 发 现 <input> 标 签 中 的 


autocomplete 属性 ， 因 为 它 的 提示 框 会 显示 在 <datalis 忆 标签 的 上 面 ， 挡 住 <datalist>， 所 以 禁 
用 了 <input> 标 签 历史 输入 信息 的 提示 。 最 后 看 看 运行 后 的 效果 ， 如 图 8-13 所 示 。 









| Tmms rm D rile;:///D:/JSEDoK/08/0 帘 | 至 





NS IS ms Le ce | book@qq com 
你 的 邮箱 ，Jeook book@153.com 


book@gmail com 
book@sna com 
book@126 com 
book@zIf me 


图 8-13 Firefox 和 Chrome 中 显示 datalist 的 效果 


8.5 相关 参考 


e 浏览 器 大 全 一 一 http://liulanmi.com/browser。 
e HTML5 支持 检测 一 一 http://html5test.com。 
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第 9 音 在 Web 页 面 中 轻松 
控制 多 媒体 视频 和 音乐 


没有 音乐 ， 生 命 是 没有 价值 的 。 
一 一 弗 里 德里 希 。 威廉。 尼采 


生活 中 不 能 没有 音乐 ， 在 互联 网 时 代 的 生活 中 更 加 不 能 没有 音乐 。 从 某 种 意义 上 讲 ， 
HTML5 提供 的 音频 和 视频 元 素 是 人 类 生活 的 一 种 基本 需要 ， 所 以 它 是 很 重要 的 。 
本 章 主 要 知识 点 : 


e 容器 和 编 解码 器 
e 播放 控制 
e 播放 事件 


9.1 在 页 面 中 插入 视频 和 音频 


在 使 用 video 元 素 和 audio 元素 之 前 ， 需 要 简单 介绍 与 之 相关 的 几 个 概念 ， 容器 、 编 码 和 
解码 。 编 解码 的 工具 习惯 上 理解 就 是 编 解码 器 。 


9.1.1 容器 和 编 解 码 器 


简单 地 说 容器 就 像 是 压缩 包 文 件 ， 可 以 包括 一 个 或 多 个 不 同 的 轨道 ， 如 音频 轨道 、 视 频 
轨道 、 元 数据 、 字 幕 等 信息 ， 放 在 一 个 文件 中 ， 是 为 了 便于 同时 回放 。 

容器 是 用 来 区 分 不 同文 件 的 数据 类 型 的 ， 一 般 所 说 的 文件 格式 或 者 后 绥 名 指 的 就 是 文件 
的 容器 。 对 于 一 种 容器 ， 可 以 包含 不 同 编码 格式 的 视频 和 音频 ， 比 如 txt 格式 可 以 有 GBK 编 
码 ， 也 可 以 有 UTF8 编码 。 

编码 其 实 就 是 用 一 组 特定 的 算法 把 原始 数据 进行 处 理 。 一 般 而 言 ， 原 始 数据 体积 都 非常 
大 ， 如 果 不 对 其 编码 ， 那 么 在 网 络 传输 所 浪费 的 时 间 就 无 法 让 人 接受 ， 所 以 解码 就 是 把 编码 
过 的 数据 还 原 为 原始 数据 ， 否 则 接收 者 就 无 法 看 到 原始 数据 。 解 码 器 通常 还 要 对 同一 种 格式 





文件 、 不 同 编码 的 内 容 进行 判断 。 
- 般 来 说 ， 一 种 编码 可 以 对 应 不 同 的 文件 格式 。 常 见 的 音频 /视频 文件 格式 〈 容 器 ) 和 编 
码 器 如 表 9-1 和 表 9-2 所 示 。 


表 9-1 常见 的 音频 /视频 文件 格式 





容器 名 称 


文件 格式 


说 明 





OGG 


AVI 


MPG 


VOB 


MP4 


3GP 


ASF 


RM 


*.0ga/*.0gV 


*.avi 


*.mpg/*.mpe 
g/*.dat 


*.vob 


*.mp4 


*.3gp 


*. Wmv/*.asf 


*.rm/*.rmvb 


一 个 自由 且 开 放 标 准 的 容器 格式 ， 由 Xiph.Org 基金 会 所 维护 。Ogg 格式 并 不 
受 软件 专利 的 限制 ， 并 设计 用 于 有 效率 地 处 理 流 媒 体 和 高 质量 的 数字 多 媒 
体 。 可 以 纳入 各 式 各 样 自 由 和 开放 源 代 码 的 编 解码 器 ， 包 含 音效 、 视 频 、 文 
字 〈 像 字幕 ) 与 元 数据 的 处 理 ， 是 HTMLS5 视频 常用 的 一 种 格式 


Audio Video Interactive， 就 是 把 视频 和 音频 编码 混合 在 一 起 储存 ， 是 最 常见 

音频 视频 容器 。 支 持 的 视频 音频 编码 也 是 最 多 的 。AVI 也 是 最 长 寿 的 格 
式 ， 已 存在 10 余年 了 ， 虽 然 发 布 过 改版 (V2.0 于 1996 年 发 布 ) ， 但 已 显 老 
态 


MPEG 编码 采用 的 音频 视频 容器 具有 流 的 特性 ， 里 面 又 分 为 PS、TS 等 ，PS 
主要 用 于 DVD 存储 ，TS 主要 用 于 HDTV 

DVD 采用 的 音频 视频 容器 格式 (视频 MPEG-2， 音 频 用 AC3 或 者 DTS) ， 
支持 多 视频 、 多 音 轨 、 多 字幕 章节 等 

MPEG-4 编码 采用 的 音频 视频 容器 基于 QuickTime MOV 开发 ， 具 有 许多 先 
进 特性 ， 也 是 HTML5 视频 常用 的 一 种 

3GPP 视频 采用 的 格式 ， 主 要 用 于 流 媒体 传送 。 体 积 小 ， 多 用 于 移动 端 
Advanced Systems Format，Windows Media 采用 的 音频 视频 容器 ， 能 够 用 于 流 
传送 ， 还 能 包容 脚本 等 。ASF 封装 的 WMV 视频 具有 “数位 版 权 保护 ”功能 


RealMedia 采用 的 音频 视频 容器 ， 用 于 流传 送 。 由 RealNetworks 开发 的 一 种 
容器 ， 它 通常 只 能 容纳 Real Video 和 Real Audio 编码 的 媒体 。 可 变 比 特 率 的 
rmvb 格式 ， 体 积 很 小 





MOV 


*.mOV 


QuickTime 的 音频 视频 容器 ， 有 较 高 的 压缩 比率 和 较 完美 的 视频 清晰 度 ， 且 
跨 平 台 





MKV 


Matroska， 它 能 把 Windows Media Video、RealVideo、MPEG-4 等 视频 音频 
融 为 一 个 文件 ， 而 且 支持 多 音 轨 、 支 持 章节 字幕 等 。 开放 标准 、 开 源 





WAV 


*.Way 


一 种 音频 容器 ， 常 说 的 WAYV 就 是 没有 压缩 的 PCM 编码， 其 实 WAV 里 面 还 
可 以 包括 MP3 等 其 他 ACM 压缩 编码 





TS 


WebM 








*#.Webm 





MPEG-2 transport stream， 用 于 数字 广播 等 非 可 靠 传 输 领 域 。 在 远程 教学 视 
频 中 很 常用 
Google 基于 MKV 容器 开发 的 一 个 免费 、 开 源 的 媒体 容器 格式 ，Google 说 
WebM 的 格式 相当 有 效率 ， 应 该 可 以 在 netbook、tablet、 手 持 式 装置 等 上 面 
顺畅 地 使 用 
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表 9-2 常见 的 音频 视频 编码 器 
编码 器 说 明 


由 ISO (国际 标准 组 织 机 构 》 下 属 的 MPEG (运动 图 像 专 家 组 ) 开 发， 视频 
编码 方面 主要 是 Mpegl (VCD 用 的 就 是 它 ) 、Mpeg2 (DVD 使 用 ) 、 
Mpeg4〔 现 在 的 DVDRip 使 用 的 都 是 它 的 变种 ， 如 DivX、Xvi 等 ) 、Mpeg4 











MeG 系列 AVC; 音频 编码 方面 主要 是 MPEG Audio Layer 1/2、MPEG Audio Layer 3 
(大 名 易 晶 的 MP3) 、MPEG-2 AAC 、MPEG-4 AAC 等 。 注 意 : DVD 音频 
没有 采用 Mpeg 的 
二 由 ITU (国际 电 传 视讯 联盟 ) 主导 ， 包 括 H261、H262、H263、H263+、 
H263++、H264 就 是 MPEG4 AVC- 合 作 的 结晶 ) 
Windows Media 系列 微软 视频 编码 有 MPEG-4 vl/v2/v3 (基于 MPEG4，DivX3 ) 、Windows 
ee Media Video 7/8/9/10， 音频 编码 有 Windows Media audeo v1/v2/7/8/9 
视频 编码 有 RealVideo G2 (早期 ) 、RealVideo 8/9/10; 音频 编码 有 
Real Media 系列 . 和 
RealAudio cook/sipro (早期 ) 、RealAudio AAC/AACPlus 等 
QuickTime 系列 视频 编码 有 Sorenson Video 3 用 于 QT5， 已 成 标准 化 ) 、Apple MPEG-4、 
ee Apple H.264 ; 音频 编码 有 QDesign Music 2、Apple MPEG-4 AAC 
Ogg Theora 因为 开源 ， 是 HTML5 曾 建议 支持 的 编码 器 。 它 是 有 损 压 缩 技术 


音频 编码 、 视 频 编 码 有 时 候 也 叫 音频 压缩 、 视 频 压 缩 。 与 之 对 应 的 解码 器 还 分 为 软件 解码 
器 和 硬件 解码 器 。 通 常 各 种 播放 器 软件 会 集成 多 种 解码 器 ， 而 有 些 解码 器 可 以 解码 多 种 格式 。 

众所周知 ， 有 些 编 解 码 器 受 专利 保护 ， 有 些 则 是 免费 的 ， 所 以 网 络 上 充斥 着 各 种 文件 格 
式 ， 这 是 非常 不 利于 互联 互通 的 ， 但 是 目前 来 说 ， 现 状 不 会 立刻 得 到 改变 ， 但 是 像 0GG、 
MKYV 等 一 些 开源 或 不 受 限 使 用 技术 的 出 现 ， 也 让 大 家 看 到 对 互联 网 发 展 有 利 的 一 面 。 


9.1.2 使 用 HTML5 Video 和 Audio API 的 好 处 


在 以 前 和 现在 ， 网 页 中 播放 视频 或 音频 的 主要 方式 是 Object 调用 Flash 插件 、QuickTime 
插件 或 者 Windows Media 插件 向 HTML 中 嵌入 视频 ， 相 对 于 这 种 传统 方式 ， 使 用 HTML5 的 
媒体 标签 有 两 大 好 处 ， 可 以 极 大 地 方便 用 户 和 开发 者 。 

第 一 ， 作 为 浏览 器 原生 支持 的 功能 ， 新 的 audio 元 素 和 video 元 素 无 须 安装 任何 东西 。 尽 
管 有 的 插件 安装 率 很 高 ， 比 如 Flash player， 但 是 在 控制 比较 严格 的 公司 环境 下 往往 被 屏蔽 。 
其 次 ， 某 些 插件 体积 庞大 ， 安 装 人 烦琐。 另外 ， 插 件 也 会 带 来 安全 问题 。 除 此 之 外 ， 对 于 设计 
人 员 来 说 ， 有 些 插件 很 难 和 页 面 其 他 内 容 集 成 ， 往 往 在 设计 好 的 页 面 中 导致 裁剪 、 透 明度 等 
问题 。 由 于 插件 一 般 使 用 独立 泻 染 模型 ， 与 基本 的 网 页 元 素 不同 ， 在 开发 时 ， 那 些 弹 出 式 菜 
单 或 其 他 需要 跨越 插件 便捷 显示 重 欠 元 素 的 时 候 ， 开 发 人 员 就 会 面临 很 大 的 困惑 。 
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第 二 ， 媒 体 元 素 向 网 页 提供 了 通用 、 集 成 和 可 脚本 化 控制 的 API。 对 于 开发 人 员 来 说 ， 
使 用 新 的 媒体 元 素 之 后 ， 可 以 轻易 地 使 用 脚本 来 控制 和 播放 内 容 。 





9.1.3 浏览 器 支持 性 检测 


通过 html5test.com 或 一 些 其 他 工具 可 以 测试 出 浏览 器 是 否 支持 <video> 和 <audio> 标 签 。 
在 表 9-3 中 可 以 看 到 微软 在 正 9 就 已 支持 <video> 和 <audio> 标 签 ， 这 真是 件 令 人 高 兴 的 事情 。 


表 9-3 各 浏览 器 对 video 和 audio 主要 特性 的 支持 情况 


controls | 
preload ly YY ITY Iv | 





浏览 器 品种 多 样 ， 且 依赖 第 三 方 检测 也 不 是 妥善 之 策 ， 所 以 检测 浏览 器 是 否 支持 <video> 
和 <audio> 标 签 最 简单 的 方式 是 使 用 脚本 创建 它 ， 然 后 检测 特定 的 属性 是 否 存 在 : 

var canPlayVideo = !! (document.createElement ('video') .canPlayType) 

这 会 在 内 存 里 动态 创建 一 个 video 元 素 ， 不 显示 在 页 面 上 ， 然 后 检查 独 有 的 canPlayType() 
方法 是 否 存 在 ， 其 他 独 有 的 方法 属性 也 可 以 测 出 来 ， 通 过 “由 ”运算 符 将 结果 转换 为 布尔 
值 ， 这 样 就 可 以 知道 视频 对 象 是 否 创建 成 功 ， 也 就 是 说 明 浏 览 器 是 否 支持 视频 。 音 频 同 理 。 


9.1.4 使 用 video/audio 元 素 


如 果 检 测 结果 不 支持 ， 而 项 目 又 需要 兼容 ， 可 以 触发 另 一 部 分 代码 向 页 面 插入 传统 的 媒 
体 播放 代码 。 除 此 之 外 ， 还 可 以 在 video 和 audio 元 素 中 放 入 备 选 内 容 ， 不 支持 的 话 就 可 以 显 
示 这 些 备 选 内 容 ， 比 如 把 Flash 插件 播放 同样 视频 音频 的 代码 作为 备 选 内 容 。 

如 果 无 须 兼容 ， 就 给 用 户 一 个 简单 的 文本 提示 来 代替 ， 用 下 面 的 代码 即 可 。 

<video src="iceage4.mp4" controls> 

你 的 浏览 器 不 支持 HTML5 videol! 

</video> 

在 <video> 标 签 中 设置 一 个 src 文件 路 径 ， 然 后 添加 一 个 带 有 默认 播放 控制 器 的 面板 。 如 
果 要 播放 音频 则 用 同样 的 方法 ， 只 是 src 的 源 可 能 就 是 MP3 等 音频 文件 格式 。 
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如 果 要 兼容 插件 方式 播放 ， 就 要 用 下 面 的 代码 : 


<video src="iceage4.mp4" controls> 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> 
<param name="movie" value="iceage4.swf" /> 
<embed type="application/x-shockwave-flash" src="iceage4.swf"></embed> 
</object> 
</video> 


浏览 器 执行 这 段 代 码 时 ， 如 果 支 持 HTML5， 那 么 <object> 标 签 内 的 代码 就 会 被 忽略 ， 反 
之 就 用 <object> 设 置 的 classid 插件 编号 去 调用 系统 里 的 插件 ， 这 里 是 Flash Player 的 ID， 然 后 
播放 iceage4.swf 文件 。 这 里 的 <embed> 标 签 是 在 非 IE 或 非 Window 环境 下 使 用 ， 这 种 object- 
embed 混合 写法 是 Macromedia 公司 所 提倡 的 兼容 写法 。 


9.1.5 使 用 source 元 素来 兼容 


- 般 来 说 ， 只 需要 设置 一 个 src 指向 媒体 文件 就 可 以 了 ， 但 是 对 于 不 同 浏览 器 来 说 ， 支 
持 的 文件 格式 目前 仍然 是 各 不 相同 ， 请 看 表 9-4。 


表 9-4 浏览 器 支持 的 媒体 文件 格式 


文件 格式 或 编码 LE |Fireox |opea |cnme | 
x 


x 





H264 编 码 的 文件 | 


Opera 从 13 版 开始 采用 Chrome 的 内 核 后 其 特性 基本 和 Chrome 一 致 ， 对 于 浏览 器 最 真实 
的 对 文件 格式 支持 情况 可 以 用 下 面 的 代码 来 检测 。 

document .createElement ('video') .canPlayType ("video/o0gg"); 

document .createElement ('video') .canPlayType ("video/mp4"); 

document .createElement ('video') .canPlayType ("video/webm"); 

document .createElement ('video') .canPlayType ("video/webm; codecs= 

"vp8.0,vorbis'"); 


如 果 返 回 probably， 表 示 最 有 可 能 支持 ， 如 果 返 回 maybe， 表 示 也 许 支持 ， 如 果 返 回 空 
字符 串 ， 表 示 不 支持 ， 如 果 包 含 了 编 解 码 器 “codecs='vp8.0,vorbis'” 这 样 的 内 容 ， 只 会 返 
probably 或 者 空 字符 串 。 

用 脚本 兼容 不 同 格 式 是 其 中 一 种 方式 ， 而 <source> 标 签 是 一 种 较为 大 众 接受 的 方式 。 


<video controls> 
<source src="iceage4.mp4"/> 








回忆 


<source src="iceage4.0ogv"/> 
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<source src="iceage4.webm"/> 
</video> 


这 样 浏览 器 会 自行 去 检测 支持 的 格式 ， 并 读 取 播放 ， 不 支持 的 则 自动 忽略 。 


9.2 video/audio 元 素 的 属性 


video 和 audio 元 素 的 属性 已 经 能 做 很 多 事情 ， 默 认 播 放 控制 面板 、 自 动 播放 等 都 可 以 直 
接 用 属性 设置 ， 无 须 其 他 代码 。 


9.2.1 通过 HTML 设置 的 属性 


video/audio 元 素 默认 就 支持 通过 HTML 语法 设置 一 些 参数 对 媒体 的 控制 。 有 些 属性 两 者 
通用 ， 如 表 9-5 所 示 。 


表 9-5 video/audio 元 素 HTML5 属性 








属性 值 


a URL 字符 串 ， 要 播放 的 音频 、 视 频 的 URL 


re 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 比 如 播放 按钮 


| 如 果 出 现 该 属性 ， 则 每 当 音频 、 视 频 结束 时 重新 开始 播放 


如 果 出 现 该 属性 ， 则 音频 、 视 频 在 页 面 加 载 时 进行 加 载 ， 并 预备 


preload “| preload | video/audio | 播放 
如 果 使 用 "autoplay"， 则 忽略 该 属性 


. . 如 果 出 现 该 属性 ， 则 音频 、 视 频 在 就 绪 后 马上 播放 。 一 般 不 建议 
autoplay autoplay | video/audio 














如 此 
height | px video 设置 视频 播放 器 的 高 度 

win | 
poster | im! video 视频 封面 ， 没 有 播放 时 显示 的 图 片 

muted “| Boolean | video 是 否 输出 视频 的 声音 





这 些 属性 是 写 在 HTML 代码 标签 中 的 ， 表 9-5 中 像 controls 这 样 的 同名 值 属性 是 可 以 省 
略 值 的 。 


<video controls /> 
<video controls="controls" /> 
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这 样 的 代码 是 等 价 的 ， 对 于 有 代码 洁癖 的 同学 采用 上 面 那 行 也 是 没 错 的 。 图 9-1 是 
Firefox 浏览 器 添加 controls 属性 后 默认 的 效果 图 。 





) TRLS VideoAudio - Worille Firefor 





文件 四。 胃镜 加 ”过 看 中 历史 G) 书 符 加 ”工具 中 融 助 0 
TS Videoahndi + 


Ee /HD /S900R/00/00-1 hal 日 








图 | 
加 
和 














图 9-1 Firefox 视频 播放 器 默认 效果 


Firefox 浏览 器 中 ，controls 属性 提供 了 播放 暂停 键 、 进 度 条 、 当 前 播放 时 间 、 媒 体 总 时 
长 、 音 量 控制 器 、 全 屏 控制 。 其 他 浏览 器 也 差不多 ， 只 是 设计 风格 各 不 相同 。 

没有 控制 器 也 不 用 JavaScript， 如 何 能 够 让 媒体 正常 播放 ? 答案 是 肯定 的 ， 那 就 是 在 元 素 
中 设置 一 个 autoplay 属性 。 由 于 它 可 能 导致 大 量 网 络 数据 请 求 ， 因 此 使 用 时 需要 慎重 。 比 如 
-个 视频 网 站 ， 有 很 多 视频 ， 如 果 一 开始 设置 自动 播放 ， 那 么 必然 导致 灾难 般 的 后 果 。 

很 多 个 性 化 的 网 页 都 爱 插入 一 条 背景 音乐 ， 而 背景 音乐 通常 是 自动 播放 且 不 停 循 环 ， 不 
关闭 网 页 ， 就 会 一 直 听 到 。 如 何 办 到 的 呢 ? 答案 是 在 元 素 中 同时 设置 loop 和 autoplay 两 个 属 
性 即 可 。 








9.2.2 通过 JavaScript 设置 的 属性 


- 些 通用 的 HTML 元 素 属性 就 没有 列举 在 表 9-5 中 ， 比 如 id、class 等 ， 还 有 一 些 较为 有 
用 的 属性 只 能 在 JavaScript 中 通过 获取 DOM 对 象 后 去 设置 ， 如 表 9-6 所 示 。 


表 9-6 通过 JavaScript 设置 的 常用 属性 

















属性 值 元 素 说 明 

Volume 0.0-1.0 video/audio 音量 值 

duration Number video/audio 返回 播放 总 时 长 ， 单 位 秒 
ended Boolean video/audio 返回 当前 播放 是 否 结束 
paused Boolean video/audio 设置 或 返回 当前 播放 是 否 暂 停 





currentTime | Number video/audio 设置 或 返回 当前 播放 位 置 〈 以 秒 计 ) 
设置 或 返回 音频 /视频 所 属 的 组 合 〈 人 允许 两 个 或 更 多 音频 / 视 
频 元 素 保持 同步 ， 未 来 可 能 支持 





mediaGroup | string video/audio 
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通过 getElementById0) 函 数 可 以 获取 到 媒体 的 DOM 对 象 。 


var dom=document .getElementById ("myvideoid"); 

// 假 设 已 存在 一 个 id 为 myvideoid 的 媒体 元 素 

dom.volume=0.5; 

得 到 dom 对 象 后 ， 将 其 音量 大 小 设置 为 50%。 图 9-2 可 以 和 图 9-1 对 比 出 音量 条 的 位 置 
不 同 。 


) ITS Videothudio ~ orille Firefox 
文件 四 ， 婉 狠 四 查看 Q。 历史 G) 书签 @ 工具 中 帮助 如 
| Dims waeoawaie 土 








需 国 tile://10:/JSBO0K09109-1.htnl. 


小 50% 让 同位 











图 9-2 设置 音量 大 小 


9.3 video/audio 元 素 的 事件 


播放 是 一 个 过 程 ， 这 个 过 程 中 会 有 很 多 事件 被 触发 ， 用 户 在 这 个 过 程 中 也 会 发 生 很 多 交 
互 事 件 。 本 节 就 讨论 媒体 播放 相关 的 主要 事件 。 


9.3.1 video/audio 元 素 的 主要 事件 
当 音 频 /视频 处 于 加 载 过 程 中 时 ， 会 依次 发 生 以 下 事件 : 


onloadstart 
ondurationchange 
onloadedmetadata 
onloadeddata 
onprogress 


oncanplay 


oncanplaythrough 


135 


























有 关 这 些 事件 的 详细 说 明 请 参考 表 9-7。 
表 9-7 媒体 事件 

事件 说 明 
onloadstart 当 浏 览 器 开始 查找 音频 /视频 时 
ondurationchange 当 音 频 / 视 频 的 时 长 已 更 改 时 
onloadedmetadata 当 浏 览 器 已 加 载 音频 /视频 的 元 数据 时 
onloadeddata 当 浏览 器 已 加 载 音频 /视频 的 当前 帧 时 
onprogress 当 浏 览 器 正在 下 载 音频 /视频 时 
oncanplay 当 浏览 器 可 以 播放 音频 /视频 时 
oncanplaythrough 当 浏览 器 可 在 不 因 缓冲 而 停顿 的 情况 下 进行 播放 时 
onabort 当 音频 /视频 的 加 载 已 放弃 时 
onerror 当 在 音频 /视频 加 载 期 间 发 生 错误 时 
onpause 当 音 频 /视频 已 暂停 时 
onplay 当 音 频 /视频 已 开始 或 不 再 暂停 时 
onratechange 当 音 频 /视频 的 播放 速度 已 更 改 时 
ontimeupdate 当 目 前 的 播放 位 置 已 更 改 时 
onvolumechange 当 音 量 已 更 改 时 











常用 的 几 个 事件 是 onloadedmetadata、onerror、onpause、ontimeupdate 等 。 这 些 事 件 可 以 
通过 设置 属性 来 使 用 ， 也 可 以 以 JavaScript 的 方式 来 使 用 。 


<video id="myvideoid" controls onloadstart="console.log(‘onloadstart’);"> 


source 省 略 . . .</video> 


当 把 控制 台 (通常 按 Fl2 键 可 见 ) 打开 的 时 候 ， 刷 新 网 页 时 ， 控 制 台 会 输出 


“onloadstart” 字 符 串 。 用 JavaScript 实现 同样 的 操作 则 是 这 样 的 : 


dom.onloadstart= function(){ 
console.log ("onloadstart"); 


} 


9.3.2 设置 当前 播放 位 置 


播放 时 间 的 控制 也 是 常用 的 操作 (比如 记录 用 户 上 次 播放 位 置 后 ， 接 着 上 回 





看 过 的 地 方 


看 ) ， 一 般 通 过 currentTime 属性 来 控制 。currentTime 和 volume 属性 不 同 的 是 currentTime 需 
要 在 onloadedmetadata 事件 发 生 之 后 才 生 效 ， 因 为 媒体 文件 通常 不 在 用 户 端 ， 需 要 通过 网 络 
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请 求 ， 只 有 浏览 器 请 求 到 基本 数据 〈 元 数据 ) 之 后 ， 才 能 获取 包括 时 长 、 尺 寸 〈 仅 视频 ) 以 


及 文本 轨道 等 信息 ， 浏 览 器 才能 确定 currentTime 设置 的 位 置 。 


dom.onloadedmetadata = function(){ 
dom.currentTime = 15; 
1 


上 面 的 代码 就 是 设置 媒体 的 当前 播放 时 间 点 为 15 秒 处 ， 效 果 参 见 图 9-2。 


9.4 video/audio 元 素 的 方法 


对 于 媒体 播放 ， 最 基本 的 操作 就 是 播放 和 暂停，HTML5 为 video/audio 元 素 提供 了 便捷 


的 方法 ， 使 之 能 够 允许 JavaScript 调用 这 些 方 法 来 进行 控制 。 


9.4.1 通过 JavaScript 控制 的 方法 
通过 JavaScript 控制 的 方法 如 表 9-8 所 示 。 


表 9-8 video/audio 元 素 的 方法 








方法 说 明 
开始 播放 音 鼎 视 上 
条 入 当前 播放 的 音 顷 视 频 


看 新 加 和/ 视 频 元 


检测 浏览 器 是 否 能 播放 指定 的 音频 /视频 类 型 
向 音频 视频 站 加 新 的 文本 轨道 





下 面 简单 演示 一 下 play 方法 和 pause 方法 的 用 法 。 


<!DOCTYPE html> 

<html> 

<body> 

<video id="videol" > 
<source src="iceage4.mp4"/> 
<source src="iceage4.0gv"/> 

</video> 

<br/> 


<button onclick="myVideo.play()"” type="button"> 播 放 视频 </button> 
<button onclick="myVideo.pause()" type="button"> 暂 停 视 频 </button> 


<script> 
Var myVideo=document .getElementById ("videol"); 
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</script> 
</body> 
</html> 


HTML 代码 中 没有 让 <video> 元 素 启用 自 带 的 播放 器 控制 ， 这 就 必须 使 用 我 们 自己 编写 的 
代码 来 控制 视频 的 播放 。JavaScript 首先 获取 元 素 DOM 对 象 存储 在 全 局 变量 myVideo 中 ， 方 
便 onclick 事件 调用 。 两 个 不 同 的 按钮 分 别 执行 播放 和 暂停 视频 。 


9.4.2 鼠标 悬 停 播放 ， 移 开 暂 停 


- 些 国 外 的 视频 网 站 ， 在 列表 时 就 采用 了 鼠标 悬 停 播放 视频 的 预览 短片 ， 让 用 户 可 以 快 
速 取舍 是 否 需 要 进一步 观看 。 预 览 短片 的 体积 肯定 很 小 ， 先 不 说 它 是 如 何 提 取 的 ， 单 从 
JavaScript 的 实现 上 去 分 析 ， 这 是 如 何 做 到 的 呢 ? 
其 实 很 简单 ， 就 是 在 通用 事件 onmouseover 和 onmouseout 中 控制 视频 的 播放 和 暂停 。 
<video id="videol" onmouseover="this.play()" onmouseout="this.pause()"> 
<source src="iceage4.mp4"/> 
<source Src="iceage4.ogv"/> 
</video> 
在 onmouseover 和 onmouseout 事件 中 其 实 也 是 调用 的 JavaScript 代码 ，this 指向 元 素 本 
身 ， 相 当 于 document.getElementByld("video1")。 


5 综合 应 用 一 一 打造 属于 自己 的 视频 播放 器 


9.5.1 界面 设计 
抛弃 系统 的 播放 器 而 重新 设计 有 几 个 好 处 : 


日 风格 可 以 控制 ， 使 之 在 不 同 的 浏览 器 下 效果 一 致 ; 

可 以 移 除 播放 器 的 某 些 功能 

日 可 以 丰富 播放 器 ， 根 据 项 目 需要 扩展 一 些 功能 ， 比 如 会 员 功 能 、 设 置 版 权 / 清 晰 度 切 

换 等 。 

本 节 也 列举 一 个 实例 来 讲解 如 何 打造 个 性 化 的 播放 器 ， 请 先 看 图 9-3。 

这 个 播放 器 提供 播放 、 和 暂停 、 音 量 调节 功能 ， 还 包括 进度 条 、 当 前 播放 时 间 、 影 片 总 时 
长 、 全 屏 播 放 ， 外 加 一 个 可 以 放 广告 或 动态 字幕 的 区 域 ， 中 间 的 大 播放 按钮 用 CSS3 无 图 绘 
制 。 下 面 我 们 就 来 实现 这 个 播放 器 。 
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9-3 打造 自主 的 播放 器 


9.5.2 CSS3+HTML 布局 


首先 要 用 到 一 个 基本 的 视频 播放 元 素 ， 外 面 用 <div> 包 囊 起 来 作为 主 容器 ， 用 于 统一 


作 ， 定 义 ID 和 class， 另 外 设置 一 张 预览 图 moviejpg， 用 source 兼容 不 同 的 浏览 器 格式 。 


<div id="myVideo" class="zPlayer"> 
<video poster="movie.jpg"> 
<source src="movie5.mp4"> 
<source Src="movie5.ogv"> 
</video> 
</div> 


下 面 就 是 构造 大 播放 按钮 的 代码 ， 将 其 放 在 上 面 id 为 myVideo 的 div 里 





o 


<div class="ui-play"><span></span></div> 


利用 边框 属性 和 CSS3 圆 角 、 投 影 绘制 三 角 箭头 和 按钮 ， 具 体 的 CSS3 技术 在 接 下 来 的 第 


10 章 中 会 讲 到 ， 先 看 一 下 代码 。 


.ZzPlayer .ui-play{ 
background: none repeat scroll 0 0 #333; 
border: 3px solid #333; 


border-radius: 5px 5px Spx Spx; /* 圆 角 */ 
box-shadow: 3px 3px 3px #111; /* 设 置 投影 */ 


height: 100px; 

padding: 10px 20px 10px 10px; 

width: 100px; 

position:absolute; /* 设 置 定位 */ 
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cursor:pointer; 


1 


.ZzPlayer .ui-play span{ border-bottom: 50px solid transparent; border-left: 
60px solid #FFFFFF;border-top: S50px solid transparent;display: 
height: 0; width: 0;margin-left: 41lpx; 

1 


inline-block; 


<span> 标 签 主要 用 来 绘制 三 角 箭头 ，<div> 主 要 是 主体 播放 按钮 ， 因 为 要 居中 ， 所 以 要 定 
位 ， 而 且 主 容器 需要 将 position 属性 设置 为 relative。 接 下 来 需要 加 上 进度 条 和 时 间 。 


<div class="proLines"> 
<div class="arial currentTime">00:00:00</div> 
<div class="line"> 
<div class="isPlayLine"> 
<div class="currentCircle"></div> 
</div> 
</div> 
<div class="arial allTime"></div> 
</div> 


其 中 class 为 line 的 <div> 是 进度 条 的 容器 ， 是 最 外 层 的 长 形 条 ，class 为 isPlayLine 的 
<div> 是 已 经 播放 的 蓝 色 进度 条 容器 ， 而 它 里 面 的 <div> 是 进度 条 的 白色 移动 块 。 最 后 要 放置 
播放 控制 、 音 量 控制 等 主要 按钮 。 

<div class="playBars"> 

<div class="startBar"><img src="Images/stop.jpg" border="0"></div> 
<div class="voiceContent"> 
<div class="voice"> 
<img src="Images/voice.jpg" id="voiceImg" border="0"> 
</div> 
<div class="voiceline"> 
<div class="voicekuai"></div> 
</div> 
</div> 
<div class="playTxt"> 我 的 播放 器 ， 我 做 主 </div> 
<div class="fullBtn"><img src="Images/full.png" width="17" 
height="15" border="0"></div> 
</div> 


playBars 里 的 <div> 都 需要 用 float 让 它们 从 左 到 右 排列 起 来 。 下 面 是 除 居中 播放 按钮 样式 
外 的 其 他 CSS 代码 。 


.ZzPlayer{background:#000;position:relative;} 
.ZzZPlayer .playTxt{ 


background: none repeat scroll 0 0 #CCC;border-radius:2px;float: left; 
height: 30px;line-height: 30px;margin-top: 8px;width: 70%; 
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text-shadow: 0 0 4px #fff, 0 0 Spx #fff;text-align:center; 
1 
.ZzPlayer .line {height:12px;border: lpx solid #303030;border-radius:2px; 
float:left; margin:4px 2px auto 2px;cursor:pointer;} 
.ZPlayer .proLines{ color:#D0D0D0; padding-left:1px;padding-right:1px; 
height:18px;} 
.ZzZPlayer .arial{font-size: 12px; font-weight: 500; font-family: arial;line- 
height:18px; float:left;} 
.ZzZPlayer .isPlayLine{width:0px;height:12px;background-color:#399CCF;} 
.ZzZPlayer .currentCircle{width:12px;height:12px;background-color:#fff; 
position:absolute;z-index: 99;margin-left: lpx;} 
.ZzZPlayer .playBars{ height:46px;background:url('images/bars.jpg') repeat-x; 
margin-top: -2px; clear:both;} 
.ZzZPlayer .startBar{ width:34px; height: 33px; padding-top:5px; margin-left: 
6px;float:left; cursor: pointer;} 
.ZzZPlayer .fullBtn{float: right;height: 20px;width: 20px;margin-top: 14px; 
margin-right: 10px;} 
.ZzPlayer .fullBtn:hover img{cursor: pointer; height:17px; width:19px; 
margin-top:-1lpx; margin-left:-1lpx;} 
.ZzZPlayer .voiceContent{ width:80px;height:15px;padding-top:15px; margin- 
left: 28px;float:left ;color:#fff} 
.ZPlayer .voice{ float:left;} 
.ZzPlayer .voiceline{float:left;width:45px;height:13px;margin-top: -1lpx; 
margin-left:3px;background: url ("images/voiceline.jpg") no-repeat;} 
.ZzPlayer .voicekuai{width:6px;height:12px;border-radius:2px;background- 
color: #fff;position:absolute; margin-top: 3px;} 


这 些 控制 按钮 也 可 以 用 CSS3 绘制 ， 限 于 篇 幅 ， 这 里 用 图 片 代替 ， 希 望 读者 自行 根据 大 
播放 按钮 的 CSS 代码 去 发 挥 。 接 下 来 将 介绍 如 何 用 JavaScript 来 控制 这 个 播放 器 。 


9.5.3 用 JavaScript 控制 播放 器 


为 了 使 代码 更 加 简洁 以 提高 开发 效率 ， 在 本 例 中 引入 jQuery 来 做 一 些 基本 的 DOM 元 素 
查找 和 事件 的 绑 定 操作 。 


<script src="jquery-1.7.2.min.js"></script> 
<script src="zPlayer.js"></script> 


将 主要 的 代码 独立 存放 在 zPlayerjs 中 。 首 先 定义 一 个 对 象 ， 将 播放 器 的 操作 对 象 化 。 
var zPlayer=function(palyerwidth,selector){ 


zPlayer 构造 函数 接受 两 个 参数 ， 即 palyerwidth 播放 器 的 宽度 和 selector 选择 器 。 
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第 一 步 先 把 各 种 需要 用 到 的 DOM 元 素 用 变量 存储 起 来 ， 这 样 做 不 仅 能 够 提高 内 存 利用 
率 ， 还 可 减少 代码 字 节 。 


var vBox= $ (selector); // 自 定义 播放 器 的 jQuery 对 象 
var vDom = vBox.find ("video"); // 系 统 播放 元 素 的 jQuery 对 象 
var dom = vDom[0]; // 系 统 播放 元 素 的 DOM 对 象 


var voiceDom = vBox.find(".voicekuai");  // 声 音 滑动 块 jQuery 对 象 

var voicekuaiDom = vBox.find(".voicekuai"); 

var currentDom =vBox.find(".currentTime");// 当 前 事件 jQuery 对 象 

var allTimeDom = vBox.find(".allTime");  // 总 时 长 jQuery 对 象 

Var startDom = vBox.find(".startBar"); // 播 放 按钮 jQuery 对 象 

Var lineDom = vBox.find(".line"); // 进 度 条 jQuery 对 象 

var voicelineDom = vBox.find(".voiceline"); // 声 音 背 景 jQuery 对 象 
var currentCircleDom=vBox.find(".currentCircle");// 进 度 条 移动 块 jQuery 对 象 
var isPlayLineDom = vBox.find(".isPlayLine"); // 已 播放 进度 条 jQuery 对 象 
var fullBtnDom = vBox.find(".fullBtn"); // 全 屏 窗口 jQuery 对 象 
var uiplayDom = vBox.find(".ui-play"); // 大 播放 按钮 jQuery 对 象 


由 于 进度 条 长 度 不 是 固定 的 ， 因 此 需要 先 计算 进度 条 的 长 度 。 
var lineLength= palyerwidth- (vBox.find(".currentTime") .width()*2)-10; 


接着 设置 一 些 播放 器 的 基本 属性 ， 如 宽度 、 音 量 大 小 、 播 放 按 钮 居中 等 。 


vBox.width (palyerwidth); // 设 置 播放 器 宽度 
VDom.width (palyerwidth); 

lineDom.width (lineLength); // 初 始 化 进度 条 的 长 度 
dom.volume=0.5; // 设 定 音 量 值 

// 初 始 化 播放 按钮 居中 


uiplayDom.css({'left': (palyerwidth - uiplayDom.width())/2,'top': 
(vDom.height () - uiplayDom.height ()) /2 }) 
VoiceDom.css('left',voiceDom.position().left+40); 


上 面 的 代码 将 播放 器 设置 为 传递 进来 的 宽度 值 ， 音 量 设置 为 50%， 通 过 计算 播放 器 的 高 
宽 减 去 播放 按钮 的 高 宽 除 以 2 来 设置 播放 按钮 相对 播放 器 的 位 置 居 中 ， 最 后 将 标示 音量 大 小 
的 图 标 移动 到 相应 位 置 。 
接 下 来 需要 添加 一 系列 用 户 触发 操作 的 事件 。 
// 绑 定 加 载 总 时 长 事件 
vDom.on ("loadedmetadata", function(){ 
allTimeDom.html (Convert (ParseInt (dom.duration))); 
Ms 
// 点 击 屏幕 事件 
VvDom.on ("click",function(){ 
PlaybackControl (); 
Wx 
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// 播 放 停止 单 击 事件 
startDom.click (function(){ 
PlaybackControl (); 

// 播 放 停止 单 击 事件 

uiplayDom.click (function(){ 
PlaybackControl (); 

]}) 7 

// 拖 动 时 长 事件 

lineDom.click(function(e){ 
ChangeProcess (e); 

Hz 

// 全 屏 点 击 事件 

fullBtnDom.click (function(){ 
fullScreen (dom); 

]}) 

// 声 音 点 击 事件 

VoicelineDom.click(function(e)1{ 
var old = voicelineDom.position().left; 
Var currentX = e.pageX-old; 
dom.volume = Math.round((100/45)*currentX) /100>1?1:Math. 
round( (100/45)*currentX) /100; 
voiceDom.css('left',e.pageX+"px"); 

]) 7 


除 这 些 事件 对 应 执行 的 函数 之 外 ， 还 定义 了 一 个 时 间 转 换 函 数 Convert)， 主 要 是 将 秒 数 
转换 为 时 分 秒 的 格式 ， 以 便 适 应 阅读 习惯 ， 播 放 器 内 部 的 总 时 长 和 当前 播放 时 间 点 都 是 以 秒 
为 单位 的 。 

【范例 9-1】 是 全 部 的 JS 控制 结构 及 其 代码 。 


【范例 9-1 JavaScript 控 制 播放 器 】 





和 Var zPlayer=function (palyerwidth, selector){ 

2 // 获 取 视频 节点 

汪 。 var vBox = $(selector); // 自 定义 播放 器 的 jQuery 对 象 
4. Var VDom = vBox.find("video"); // 系 统 播放 元 素 的 jQuery 对 象 
5 //… 此 处 省 略 10 个 变量 对 象 

从 var fullBtnDom = vBox.find(".fullBtn"); // 全 屏 窗口 jQuery 对 象 

Ra var uiplayDom = vBox.find(".ui-play"); // 大 播放 按钮 jQuery 对 象 

8. // 计 算 进 度 条 长 度 

9 var lineLength=palyerwidth- (vBox.find(".currentTime") .width()*2)-10; 
和 Var timeInterval= null; 

Us (function(){ 

2 // 设 置 播放 器 宽度 

3s vBox.width (palyerwidth); 

A VDom.width (palyerwidth); 
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// 初 始 化 进度 条 的 长 度 

lineDom.width (lineLength); 

// 设 定 音 量 值 

dom.volume=0.5; 

// 初 始 化 播放 按钮 居中 

uiplayDom.css({'left': (palyerwidth-uiplayDom.width())/2, 


‘top': (vDom.height() - 30 uiplayDom.height ())/2 }) 


voiceDom.css('left',voiceDom.position().left+40); 


// 绑 定 加 载 总 时 长 事件 


VDom.on ("1oadedmetadata",function()1{ 
allTimeDom.html (Convert (ParseInt (dom.duration))); 

In 

// 此 处 省 略 5 个 事件 

// 声 音 点 击 事件 

voicelineDom.click(function(e)1{ 
var old= voicelineDom.position().left; 
Var currentX = e.pageX-old; // 通 过 鼠标 的 位 置 计算 
dom.volume= Math.round((100/45) *currentX) / 
100>1?1:Math.round((100/45) *currentX)/1007 
voiceDom.css('left',e.pageX+"px"); 

i 


// 进 度 条 拖 放 程序 


(function(){ 

var isDraging= false; 

Var minx= currentCircleDom.position().left; 
Var maxX= allTimeDom.position().left 

var Start= function(){ 

$ (document) .bind ("mousemove", function(e){ 
// 鼠 标 移动 
if(isDraging){ 

ClearInterval (timeInterval); 
if(e.pagex< minxX||le.pageX> maxX) {return false;} 
currentCircleDom.css({"left":e.pageX+"px"}); 
isPlayLineDom.width((e.pageX - isPlayLineDom. 
position().left)+"px"); 

上 
1); 
$ (document) .bind ("mouseup", function(e){ 
// 鼠 标 松 开 
if(isDraging){ 

$ (document) .unbind ("mousemove"); 

isDraging=false; 

ChangeProcess (e); 


Py 
isDraging = true; // 鼠 标 按 下 时 ， 标 示 可 以 拖 动 
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currentCircleDom.on ("mousedown",Start); ”// 和 鼠标 按 下 
PA 
// 声 音 拖 放 
(function(){ 
Var minXX = voicekuaiDom.position().left-24; 
Var maxXX= minXX+45; 
var isVoiceDraging = false; 
Var Start = function(){ 
$ (document) .bind ("mousemove", function(e){  // 和 鼠标 移动 
if(isVoiceDraging){ 
if(e.pageXx< minXx||e.pageX> maxXX) {return false;} 
Var currentX = e.pageX- minxx; 
voicekuaiDom.css({"left":e.pageX+"px"}); 
dom.volume = (100/45)*currentX/100; 


1D); 
$ (document) .bind ("mouseup", function(e){ /1 鼠标 松 开 
if(isVoiceDraging){ 
$ (document) .unbind ("mousemove"); // 解 除 绑 定 
isVoiceDraging=false; 


1); 
isVoiceDraging = true; // 鼠 标 按 下 时 ， 标 示 可 拖 动 
}; 
voicekuaiDom.on ("mousedown", Start); 
}) 0s; 
BU 
// 全 屏 操作 
var fullScreen = function(el)1{ 
Var pfix= ['webkit', 'moz','o', 'ms','khtml']; 
// 循 环 判断 不 同 浏览 器 是 否 支持 全 屏 
WAr FL wy 
for (var i=0;i<pfix.length;i++) { 
if(typeof document [pfix[i] + 'CancelFullScreen' ] != 
'undefined'){ 
fix = pfix[i]; 
break; 


} 
if (fix === ''){ alert(' 浏 览 器 不 支持 !'); } 
el[fix + 'RequestFullScreen'] (); 





}; 
// 播 放 视频 
var startVideo=function(){ 
dom.play (); 
timeInterval = setInterval (function(){ 


// 根 据 时间 计 算 进 度 条 位 置 
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Var currentLine = ParseInt (dom.currentTime)*((lineLength-12)/ 


parseInt (dom.duration)); 
// 显 示 当 前 播放 时 间 
currentDom.htm]l (Convert (dom.currentTime)); 
// 移 动 进度 条 位 置 
isPlayLineDom.width (CurrentLine+4) 7 
currentCircleDom.css ("left",currentLine+isPlayLineDom. 
position().left+"px"); 
// 如 果 播 放 完毕 则 重 置 
if(dom.ended) EndVideo(); 
},500); 
] 7 
// 播 放 结束 后 的 方法 
Var EndVideo=function(){ 
changeStatus (true); 
currentDom.html ("00:00:00"); 
isPlayLineDom.width (0); 
currentCircleDom.css ("left",]lineDom.position() .left+2); 
clearInterval (timeInterval); 
jy 
// 暂 停 视频 
var stopVideo=function(){ 
dom.pause (); 
clearInterval (timeInterval); 
7 
// 改 变 播放 器 的 状态 
var changeStatus=function (bool){ 
if(dom.pausedg&!bool1){ 
startDom.find("img") .attr ("src","Images/start.jpg"); 
uiplayDom.hide() 
}else{ 
startDom.find("img") .attr ("src","Images/stop.jpg"); 
uiplayDom. show (); 


}; 
// 播 放 暂 停 按 钮 
var PlaybackControl=function(){ 
changeStatus (false); 
if(dom.paused) 
startVideo(); 
else 
stopVideo(); 
i 
//Change 进度 条 
Var ChangeProcess=function(e){ 
stopVideo(); 


Var positionRelative=parseInt (e.pageX - lineDom.position().left); 


147. dom.currentTime=(positionRelative/ (lineLength))*dom.duration; 


148. changeStatus (); 

149. startVideo(); 

150% ys 

证 请 // 将 秒 转换 为 时 分 秒 的 格式 

525 var Convert=function (seconds){ 

Ek Var hh,mm,ss; 

154. // 传 入 的 时 间 为 空 或 小 于 0 

请 if(seconds==null||seconds<0) return; 
156. // 得 到 小 时 

证 雹 光 hh = seconds/360010; 

1585 seconds = parseInt (seconds) -hh*3600; 
159。 if(ParseInt (hh)<10) hh="0"+hh; 

160 // 得 到 分 

161. mm = seconds/6010; 

E62 // 得 到 秒 

163 . SS = ParseInt (seconds) -mm*60; 
164. if (parseInt (mm) <10) mm="0"+mm; 

165. if(ss<10) ss="0"+ss; 

166. return hht":"+mmt":"+ss; 

和 61 Bs 

168. 1}; 


将 代码 保存 为 js 文件 ， 在 html 页 面 中 引入 后 ， 需 要 用 下 面 的 代码 实例 化 才能 让 播放 器 正 
常 跑 动 起 来 。 

<script> 

$ (function(){ 
new 2zPlayer(700,".zPlayer"); 

ee 

其 中 $0 方 法 接受 一 个 回调 函数 ， 意 思 是 在 文档 准备 好 之 后 才 执行 这 个 方法 ， 这 是 一 个 由 
jQuery 库 提供 的 核心 功能 ， 是 网 络 及 本 书 中 最 常见 的 代码 。 到 这 里 ， 自 定义 的 个 性 化 播放 器 
基本 上 就 完成 了 ， 能 够 在 Firefox、Chrome 甚至 傲游 浏览 器 最 新 版 中 运行 起 来 。 

这 个 范例 仅仅 提供 了 一 些 基本 思路 ， 读 者 还 可 以 扩展 出 一 些 根据 时 间 变 化 的 字幕 信息 ， 
网 络 上 有 些 视 频 网 站 提供 的 开关 灯 功 能 等 。 

Mozilla 官网 还 提供 了 更 多 关于 视频 和 音频 API 的 最 新 参考 ， 读 者 可 前 去 查阅 。 


9.6 相关 参考 


® https://developer.mozilla.org/zh-CN/docsHTMILVElementvideo。 
® https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio. 
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第 10 将 用 CSS3 夯 一 个 哆 啦 A 梦 


这 世上 没有 什么 是 别人 做 得 到 但 是 你 做 不 到 的 事情 ! 
一 一 哆 啦 A 梦 对 大 雄 如 此 说 


CSS3 在 第 9 章 就 已 经 初步 介绍 ， 它 让 网 页 元 素 在 背景 和 边框 、 文 本 效果 和 动画 等 方面 拥 
有 更 为 丰富 的 表现 力 ， 使 我 们 能 够 用 代码 自如 地 编织 一 个 美丽 的 梦 一 一 哆 啦 A 梦 。 
本 章 主要 知识 点 : 


国 角 边框 
阴影 
渐变 


10.1 CSS3 简介 


当 人 类 祖先 第 一 次 将 狩猎 得 到 的 动物 羽毛 插 在 头 上 ， 将 拾 到 的 漂亮 石头 串 在 一 起 挂 在 身 
前 ， 用 自然 界 得 来 的 染料 描画 自己 的 身体 开始 ， 对 美的 追求 就 是 人 类 最 永恒 的 事 。 互 联网 时 
代 依然 不 会 落下 这 样 重 要 的 东西 ，CSS3 可 以 说 是 为 互联 网 的 美 而 生 的 。 


10.1.1 CSS3 历史 情况 


CSS 是 Cascading Style Sheet 的 缩写 ， 译 作 “ 层 登 样式 表单 ”， 是 用 于 《〈 增 强 ) 控制 网 页 
样式 并 允许 将 样式 信息 与 网 页 内 容 分 离 的 一 种 标记 性 语言 。 

在 前 面 第 3 章 中 介绍 过 CSS 和 HTML、JavaScript 之 间 的 关系 ， 从 图 3-1 可 以 知道 CSS 
占据 相当 大 的 份额 ， 可 以 说 历来 就 很 重要 。 那 么 CSS3 的 前 世 今 生 究竟 又 是 怎样 呢 ? 

很 多 人 都 知道 大 名 易 易 的 W3C， 接 触 过 网 络 技术 的 人 也 听 说 过 CSS， 很 少 有 人 知道 CSS 
其 实 比 W3C 还 更 为 古老 。 

1994 年 ，W3C 还 未 成 立 ， 一 个 叫 伯 特 。 波 斯 (Bert Bos) 的 程序 员 正 在 设计 一 个 叫 作 


Argo 的 浏览 器 ， 而 另 一 个 叫 哈 坤 。 利 的 人 提出 了 CSS 的 最 初 建议 。 由 于 志趣 相投 ， 两 人 一 拍 
即 合 决定 一 起 设计 CSS 。 

在 CSS 中 ， 一 个 文件 的 样式 可 以 从 其 他 样式 表 中 继承 下 来 。 读 者 在 有 些 地 方 可 以 使 用 自 
己 更 喜欢 的 样式 ， 在 其 他 地 方 则 继承 或 “ 层 县 ”原来 的 样式 。 这 种 层 县 的 方式 使 作者 和 读者 
都 可 以 灵活 地 加 入 自己 的 设计 ， 混 合 个 人 的 爱好 。 

他 们 觉得 非常 有 前 景 ， 哈 坤 于 1994 年 在 芝加哥 的 一 次 会 议 上 第 一 次 展示 了 CSS 的 设计 
构想 ，1995 年 他 与 波斯 一 起 再 次 展示 了 这 个 构想 。 这 个 时 候 W3C 才刚 刚 建立 ， 但 是 W3C 对 
CSS 的 发 展 很 感 兴趣 ， 它 为 此 组 织 了 一 次 讨论 会 。 哈 坤 、 波 斯 和 其 他 一 些 人 《比如 微软 的 托 
马 斯 。 雷 尔 登 ) 成 为 这 个 项 目的 主要 技术 负责 人 。 

1996 年 底 ，CSS 已 经 完成 ，1996 年 12 月 ，CSS 的 第 一 版 本 被 出 版 。 

1997 年 初 ，W3C 组 织 了 专门 管 CSS 的 工作 组 ， 其 负责 人 是 克 里 斯 。 里 雷 。 这 个 工作 组 
开始 讨论 第 一 版 中 没有 涉及 的 问题 ， 其 结果 是 1998 年 5 月 出 版 CSS 的 第 二 版 。 


1996 年 W3C 正式 推出 CSS 1。 
1998 年 W3C 正式 推出 CSS 2。 
1999 年 W3C 重新 修订 CSS 1。 
2001 年 W3C 提出 CSS3 草案 。 
2007 年 W3C 提出 CSS 2.1 草 案 。 





至 今 而 言 ， 兼 容 性 最 好 和 使 用 范围 最 广泛 的 是 CSS 2.1 版 ，CSS3 版 本 还 在 开发 完善 之 
中 ， 在 触 屏 设备 中 CSS3 的 使 用 率 还 是 非常 高 的 。 


10.1.2 CSS3 的 支持 情况 


主流 浏览 器 Chrome、Safari、Firefox、Opera 对 CSS3 都 有 很 好 的 支持 ，IE 9 对 CSS3 有 
所 支持 ，IE 8 及 之 前 的 版 本 则 基本 不 支持 CSS3 。 

下 面 用 一 组 数字 来 说 明 (来 源 于 http://caniuse.com) 各 浏览 器 对 CSS3 的 支持 情况 。 
Firefox 自 第 4 版 起 就 支持 65% 以 上 ， 目 前 版 本 已 接近 95%; Chrome 自 第 10 版 起 就 支持 超过 
65%， 目 前 版 本 也 已 接近 95%; Safari 自 第 4 版 起 支持 达 64%， 目 前 版 本 达到 80%; Opera 第 
12 版 起 支持 超过 65%， 目 前 版 本 接近 90%; 而 正 第 9 版 (习惯 称 为 IE 9) 才 支 持 355%， 目 
前 版 本 IE 11 才 支持 到 80% 左 右 。 














10.2 阴影 和 文本 阴影 


在 第 7 章 介绍 HTMLS 的 新 特性 时 也 介绍 过 CSS3 的 一 些 重要 变化 ， 其 中 笔者 认为 最 有 意 
思 的 就 是 阴影 。 它 曾经 在 CSS 2 中 出 现 过 ， 或 许 因 为 太 超前 ， 在 CSS 2.1 中 又 被 去 掉 ， 如 今 
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这 个 “ 胡 汉 三 ”又 回来 了 ， 到 底 是 什么 魅力 让 CSS3 再 也 阻挡 不 住 它 回归 的 脚步 呢 ? 本 节 就 
专门 来 学 习 阴 影 。 


10.2.1 阴影 (box-shadow) 


做 过 设计 的 朋友 可 能 最 清楚 ，2000 年 问世 的 Photoshop 6.0〈 如 图 10-1 所 示 ) 提供 了 一 个 
功能 叫 作 “图 层 样式 ”一 “投影 ”， 它 专门 做 和 shadow 类 似 的 事情 。 这 里 是 shadow 而 不 是 
box-shadow， 为 什么 呢 ? 因为 它 也 能 处 理 字体 。 这 个 为 前 端 立 下 汗马功劳 的 巨匠 ， 早 在 十 几 
年 前 就 默默 为 box-shadow 和 text-shadow 积攒 人 气 。 
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图 10-1 前 端 功臣 Photoshop 6.0 


box-shadow 属性 的 作用 是 向 框 添加 一 个 或 多 个 阴影 或 者 投影 。 它 和 Photoshop 一 样 可 以 
给 任意 有 边框 的 对 象 加 阴影 ， 如 图 片 等 。 从 表 10-1 可 以 看 出 当今 市 面 上 很 多 浏览 器 都 支持 。 


表 10-1 各 浏览 器 对 box-shadow 属性 最 早 开始 支持 的 版 本 


id Browser 





box-shadow 9 Ea | 4 10.5 10 4.0 





box-shadow 属性 值 是 由 逗号 分 阳 的 阴影 列表 ， 每 个 阴影 有 2~4 个 参数 ， 参 数 由 数值 、 可 
选 的 颜色 值 以 及 可 选 的 inset 关键 词 来 规定 。 省 略 数值 的 话 默认 值 是 0， 请 看 表 10-2 中 的 详细 
说 明 。 
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表 10-2 box-shadow 属性 语法 























值 

h-shadow ， 水 平 阴影 的 位 置 ， 允 许 负 值 
v-shadow ， 垂 直 阴影 的 位 置 ， 允 许 负 值 

blur 选 ， 模 糊 距离 

spread 选 ， 阴 影 的 尺寸 

区 | 可 选 ， 阴 影 的 颜色 

inset | 可 选 ， 将 外 部 阴影 《outset) 改 为 内 部 阴影 





box-shadow 属性 设置 边框 阴影 的 语法 如 下 : 
box-shadow : h-shadow v-shadow blur spread color inset; 

下 面 通过 实例 让 大 家 直观 感受 一 下 box-shadow 的 用 途 。 图 10-2 是 在 Firefox 的 Firebug 
插件 中 通过 “所 见 即 所 得 ”的 方式 调试 box-shadow 属性 ， 第 一 组 “1px lpx 3px green” 表 示 
阴影 在 右边 和 下 边 ， 颜 色 是 绿色 ， 而 第 二 组 “-1lpx -lpx 3px blue” 则 表示 阴影 在 左边 和 上 
边 ， 颜 色 是 蓝 色 。 使 用 box-shadow 这 种 设置 多 重 阴 影 的 能 力 可 以 创造 出 五 彩 斑 阐 的 投影 。 





文件 如 编 剖 如 查看 如 历史) 书 符 如 工具 名 帮助 0 
[| 国 waon Lt 





结果 : 让 


| 


本 » 


六 富 |IS 2 | 三国 站 -| mm- |css 了 本 Dow 网 络 Coo | 万 LEsaa 


样式 ”| 计算 出 的 笠 式 布局 Dow 
cmaerl5 (入 a1 =? 出 











dsvmerpry 








图 10-2 在 Firebug 中 动态 调试 box-shadow 属性 


只 设置 不 同方 向 的 阴影 ， 如 右边 和 底 边 ， 就 能 够 真实 地 模拟 出 自然 光线 照射 产生 的 阴 
影 ， 类 似 Photoshop 提供 的 投影 的 图 层 样式 ， 只 不 过 Photoshop 中 多 了 角度 的 调整 。 


10.2.2 文本 阴影 (text-shadow) 


text-shadow 和 box-shadow 功能 大 致 相同 ， 只 是 使 用 的 对 象 不 同 而 已 ， 前 者 用 于 文字 ， 后 
者 用 于 除 文字 以 外 的 其 他 对 象 ， 另 外 ， 在 表 10-3 可 以 发 现 很 多 标准 浏览 器 在 更 早 的 时 候 就 支 
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持 文本 阴影 ， 而 IE 则 较 晚 支持 ， 真 是 有 违 常理 ， 正 因 如 此 ， 文 本 阴影 在 IE 下 一 度 使 用 IE 独 
有 的 滤 镜 (如 filter:glow) 勉强 可 以 兼容 。 


表 10-3 各 浏览 器 对 text-shadow 属性 最 早 开始 支持 的 版 本 





特性 = Safari Firefox Opera Chrome Android Browser 





text-shadow 10 4 3.5 人 4 2 





text-shadow 的 使 用 语法 (说明 见 表 10-4) 和 box-shadow 大 致 相同 : 
text-shadow : h-shadow v-shadow blur color; 


表 10-4 box-shadow 属性 语法 





说 明 


和 
必需 ， 水 平 阴影 的 位 置 ， 允 许 负 什 
[| 


因为 文字 一 般 显 示 面 积 都 不 大 ， 所 以 不 会 有 内 外 阴影 的 选项 ， 而 Photoshop 能 够 做 到 的 
那些 浮 屠 、 止 陷 字 等 效果 ，text-shadow 似乎 还 不 能 做 到 ， 不 能 不 说 是 有 点 美中不足 。 不 管 怎 
样 ， 做 一 个 最 简单 的 文本 阴影 效果 还 是 非常 轻松 的 ， 效 果 如 图 10-3 所 示 。 






















a 
文件 于 ) 钙 查 纪 ) 查看 旭 历史 G) 书签 @) 工具 GD) 帮助 人 D 
| 国 bsam I+, 
结果 : 习 
: | 
三 寺中 用 
一 一 一 一 二 | 一己 ) 
4 » 
了 LL - CSS 脚 村 Dof 网 络 Coo- PP JSe9 





i' 可 || 样式 ”| 计算 出 的 样式 布局 Dow 
到 





ap? -emar=ls (入 31 "| 


” 加 
图 10-3 文本 阴影 效果 
此 处 设置 大 的 字号 是 为 了 演示 方便 ， 常 规 大 小 的 文本 也 是 有 阴影 效果 的 ， 其 中 代码 
“text-shadow:0 0 5px #000000” 的 意思 是 阴影 不 位 移 ， 四 周 都 有 ， 产 生 的 效果 就 是 Photoshop 
中 的 描 边 ， 阴 影 长 度 为 Spx， 颜 色 为 黑色 。 
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10.3 圆 角 


很 多 人 都 知道 苹果 手机 中 的 矩形 圆 角 图 标 ， 只 是 很 少 有 人 知道 苹果 公司 为 “便携 式 显 示 
设备 ”的 矩形 圆 角 外 观 设计 申请 了 专利 。 由 此 可 见 ， 圆 角 对 于 重视 设计 的 苹果 公司 来 说 是 多 
么 重要 ， 它 在 现代 设计 中 起 着 重要 的 审美 作用 。 























10.3.1 圆 角 (border-radius) 属性 


圆 角 属 性 是 一 个 简写 属性 ， 用 于 设置 4 个 border-*-radius 属性 ， 一 般 支持 border-radius 属 
性 就 会 支持 border-*-radius 属性 。 表 10-5 是 各 大 浏览 器 最 早 开始 支持 border-radius 的 版 本 列 
表 ， 这 个 表 中 的 数据 预示 着 可 以 在 更 大 的 范围 内 使 用 border-radius。 


表 10-5 各 浏览 器 对 border-radius 属性 最 早 开始 支持 的 版 本 





汇 Safari Firefox Opera Chrome Android Browser 


特性 
Eo DE | ll EE 
border-radius 接受 1~4 个 带 单 位 的 数值 ， 单 位 接受 px、em 和 %，4 个 值 书写 顺序 分 别 控 
制 左 上 角 (border-top-left-radius ) 、 右 上 角 (border-top-right-radius ) 、 右 下 角 (border- 
bottom-right-radius) 和 左下 角 (border-bottom-left-radius) 。 
如 果 只 设置 3 个 值 ， 即 省 略 左 下 角 ， 左 下 角 则 与 右上 角 相 同 。 如 果 设 置 2 个 值 ， 则 对 角 
是 相同 的 。 如 果 只 设置 1 个 值 ， 则 4 角 相 同 。 直 观 效果 如 图 10-4 所 示 。 











加 


order-radius:5px; order-radius:5px 10px; 


















order-radius:5px 10px 1l5px; order-radius:5px 10px 15px | 








图 10-4 border-radius 设置 4 个 不 同 值 





可 以 分 别 控制 4 个 角 ， 只 是 由 于 名 称 太 长 ， 会 导致 CSS 文件 体积 增 大 ， 建 议 使 用 简写 方 
式 ， 当 然 特 殊 需 求 例外 。 
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10.3.2 圆 角 变 圆 与 半圆 


有 了 borderradius， 要 实现 半圆 和 圆 的 效果 就 相对 容易 了 ， 图 10-5 中 从 左 到 右 ， 分 别 是 
正 圆 和 半圆 。 




























bgtder-radius: 100px; 
ight:200px ;width:200p¥ : 
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‘der-radius:0 0 100px 





00px: 
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10-5 border-radius 实现 圆 和 半圆 


实现 圆 的 要 点 是 控制 高 度 、 宽 度 和 圆 半 径 ， 比 如 图 10-5 中 左边 第 1 个 是 正 圆 ， 也 就 是 高 
宽 和 圆 角 尺寸 一 致 ， 第 2 个 是 上 半圆 ， 也 就 是 左上 角 和 右上 角 尺寸 和 高 度 一 致 ， 宽 度 是 2 
省 ;第 3 个 是 下 半圆 ， 也 就 是 右 下 角 和 左下 角 尺 寸 与 高 度 一 致 ， 宽 度 是 2 倍 ; 第 4 个 是 左 半 
圆 ， 也 就 是 左上 角 和 左下 角 尺 寸 与 宽度 一 致 ， 高 度 是 2 倍 ; 第 5 个 是 右 半 圆 ， 右 上 角 和 右 下 
角 尺 寸 与 宽度 一 致 ， 高 度 是 2 倍 。 

可 能 有 读者 会 问 ， 能 做 任意 角度 的 半圆 吗 ? 答案 是 肯定 的 ， 利 用 transform:rotate(xdeg) 可 
以 旋转 成 指定 角度 ， 将 x 设置 成 0~360 的 正 负 值 即 可 。 


10.4 渐变 


渐变 在 Photoshop 中 使 用 的 时 间 比 阴影 更 早 ， 使 用 范围 也 更 广泛 ， 包 括 最 常用 的 办 公 软 
件 Word 都 很 早 提供 了 渐变 功能 ， 浏 览 器 中 的 渐变 只 能 说 是 姗 姗 来 迟 。 

CSS3 中 的 渐变 函数 是 gradient，linear-gradient 专用 于 线性 渐变 ，radial-gradient 专用 于 放 
射 渐 变 ， 由 于 浏览 器 发 展 各 不 一 致 ， 因 此 各 厂家 的 实现 各 不 相同 。 


10.4.1 线性 渐变 
先 来 看 看 表 10-6 中 各 个 浏览 器 对 线性 渐变 函数 linear-gradient 的 支持 情况 。 


表 10-6 各 浏览 器 对 linear-gradient 属性 最 早 开始 支持 的 版 本 





浏 
3 Safari Firefox Opera Chrome Android Browser 











linear-gradient 10 2 16 12.1 26 2 _1-webkir 





Firefox 和 Chrome 浏览 器 在 很 早 的 版 本 中 就 支持 带 前 级 的 linear-gradient， 而 移动 设备 中 
的 Android Browser 截 至 2016 年 底 还 未 支持 ， 只 能 用 加 前 级 的 -webkit-linear-gradient。 





e@ Firefox 的 前 缓 是 -moz-， 即 -moz-linear-gradient。 
e@ Chrome 的 前 缓 是 -webkit-， 即 -webkit-linear-gradient。 
@ Opera 的 前 组 是 -o-， 即 -o-linear-gradient。 
e@ IE 的 前 组 是 -ms-， 即 -ms-linear-gradient。 
通过 几 个 不 同 的 实例 〈 如 图 10-6 所 示 ) 看 一 下 如 何 使 用 线性 渐变 linear-gradient， 这 些 实 
例 分 别 控制 不 同方 向 、 渐 变色 彩 、 起 始 距离 等 。 


) eradient - Worilla Firefox [= 51x] 
文件 F) 编辑) 前 看 Y) 历史 G) 书签 @) 工具 GD) 帮助 0 


| evdient [Et 


| 本 
ss 


图 10-6 使 用 线性 渐变 linear-gradient 








上 











其 主要 的 CSS 代码 如 下 : 


.linearl{background: linear-gradient (to right,#ff0000,o0range,yellow, green, 
blue,indigo,violet);} 

.linear2{background: linear-gradient (to right top,red,orange,yellow, green, 
blue, indigo,violet);} 

.linear3{background: linear-gradient (to bottom,transparent 50%,red,orange, 
yellow, green, blue,indigo,violet);} 

.linear4{background: linear-gradient (10deg,transparent 30%,red,orange, 
yellow, green, blue,indigo,violet);} 


@ linearl 表示 从 左 到 右 线性 渐变 ， 用 “to right” 表 示 ， 相 当 于 “90deg”， 后 面 是 一 组 
闫 色 值 。 


155 


e@ linear2 表示 左下 角 到 右上 角 渐 变 ， 用 “to right top” 表 示 ， 相 当 于 沿 对 角 线 渐变 ， 这 
里 不 相当 于 “45deg”， 因 为 对 角 线 与 底 边 的 夹 角 在 矩形 下 不 一 定 是 45”。 

e linear3 表示 从 上 向 下 渐变 ， 相 当 于 “180deg”， 这 是 这 里 的 起 始 颜色 ， 用 
“transparent 50%” 控制 为 透明 ， 范 围 是 一 半 ， 所 以 渐变 真正 的 起 始 是 从 50% 的 位 置 
开始 。 

e linear4 表示 沿 角度 10 的 方向 渐变 ， 除 去 透明 区 域 ， 渐 变 是 从 30% 的 位 置 真正 开始 。 
其 中 渐变 宽度 可 以 接受 百分比 或 em、px、pt 等 CSS 允许 的 带 单位 的 值 。 


10.4.2 放射 渐变 


各 个 浏览 器 对 放射 渐变 函数 radial-gradient 的 支持 和 对 线性 渐变 函数 的 支持 情况 相差 不 
多 ， 如 表 10-7 所 示 。 


表 10-7 各 浏览 器 对 radial-gradient 属性 最 早 开始 支持 的 版 本 








放射 渐变 的 使 用 和 线性 渐变 类 似 ， 只 是 各 个 浏览 器 在 支持 上 有 些 差 异 ， 下 面 通 过 几 个 实 
例 来 说 明 其 用 法 ， 如 图 10-7 所 示 。 











10-7 使 用 放射 渐变 radial-gradient 
图 10-7 实例 的 CSS 代码 如 下 : 


.radiall{background: radial-gradient (transparent 30%,red,orange,yellow, 
green, blue,indigo,violet);} 
.radial2{ 
background: -moz-radial-gradient (bottom left,transparent 30%,red, orange, 
yellow, green, blue,indigo,violet); 
background: -webkit-radial-gradient (bottom left,transparent 30%,red, 
orange, yellow, green, blue,indigo,violet); 
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} 


.radial3{ 


} 


background: -moz-radial-gradient (contain,transparent 30%,red,orange, 
yellow, green, blue,indigo,violet); 

background: -webkit-radial-gradient (contain,transparent 30%,red,orange, 
yellow, green, blue,indigo,violet); 


.radial4{background: radial-gradient (circle,transparent 30%,red, 

orange, yellow, green, blue,indigo,violet);} 

.radial5{ 

background: -moz-radial-gradient (right,transparent 30%,red,orange,yellow, 
green, blue,indigo,violet); 

background: -webkit-radial-gradient (right,transparent 30%,red,orange, 
yellow, green, blue,indigo,violet); 


.radial61{ 


background: -moz-radial-gradient (circle closest-side,transparent 
30%,red,orange, yellow, green, blue,indigo,violet); 

background: -webkit-radial-gradient (circle closest-side,transparent 30%, 
red,orange, yellow, green, blue,indigo,violet); 


radiall 表示 居中 填充 一 个 放射 渐变 ， 这 个 功能 各 大 浏览 器 均 支 持 ， 无 须 使 用 私有 前 级 
实现 。 

radial2 表示 从 左下 角 开 始 填充 一 个 放射 渐变 ， 由 于 浏览 器 未 支持 标准 函数 radial- 
gradient， 所 以 需要 用 私有 前 级 来 实现 ， 笔 者 仅 列举 了 Firefox 和 Chrome， 其 他 浏览 器 
同 理 。 

radial3 和 .radiall 类 似 ， 只 是 容器 完全 包容 填充 的 放射 渐变 。 

radial4 表示 填充 方式 是 圆 形 而 非 椭圆 。 

radial5 表示 从 某 个 方向 开始 填充 ， 这 里 是 从 right 开始。 

radial6 表示 用 圆 形 填充 ， 且 容器 完全 包含 填充 的 放射 渐变 。 


通过 代码 可 以 发 现 ， 部 分 浏览 器 目前 仍然 不 支持 radial-gradient 的 一 些 特殊 用 法 ， 所 以 读 


10.5 综合 应 用 





者 在 实际 生产 过 程 中 可 能 还 需要 用 私有 前 绥 来 兼容 不 同 浏览 器 。 





画 一 个 哆 啦 入梦 





前 面 几 小 节 是 对 阴影 、 贺 角 和 渐变 的 学 习 ， 本 章节 就 运用 这 些 功能 来 完成 一 个 综合 实 


例 一 一 用 CSS3 画 一 个 哆 啦 A 梦 (如 图 10-8 所 示 ) ， 为 了 让 它 在 正 6 下 也 能 看 到 大 致 效果 ， 
后 面 的 代码 中 做 了 一 些 兼 容 。 
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EEC 








加 



































图 10-8 在 Firefox 和 IE 6 下 用 CSS3 绘制 的 哆 啦 A 梦 


10.5.1 头 部 和 脸 部 


首先 来 制作 头 部 和 脸 部 。 先 放置 一 个 div，class 起 名 为 doraemon 以 便 进行 整体 控制 ， 然 
后 在 doraemon 中 添加 一 个 class 名 为 head 的 div，head 包含 eyes 和 face 两 大 块 div， 分 别 用 


于 绘制 眼睛 和 脸 ， 更 多 细节 请 看 【范例 10-1】。 


【范例 10-1 头 和 脸 的 HTML 代码 】 


1.<div class="head"> 


这 <div class="eyes"> 

“ 必 <div class="eye left"><div class="black bleft"></div></div> 
4. <div class="eye right"><div class="black bright"></div></div> 
5。 </div> 

6. <div class="face"> 

5 <div class="white"></div> 

8 <div class="nose"><div class="light"></div></div> 

9 <div class="nose line"></div> 

LO <div class="mouth"></div> 

<div class="whiskers"> 

12, <div class="whisker rTop r160"></div> 

jE <div class="whisker rt"></div> 

14. <div class="whisker rBottom r20"></div> 

15。 <div class="whisker lTop r20"></div> 

16. <div class="whisker lt"></div> 

17。 <div class="whisker lBottom r160"></div> 

18, </div> 

E93 </div> 

20.</div> 


哆 啦 A 梦 的 头 不 是 正 圆 ， 将 其 设置 为 宽 320px、 高 300px 的 一 个 椭圆 ， 这 号 
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border-radius 属性 让 它 变 成 椭圆 形 的 头 ， 用 radial-gradient 填充 一 个 从 右上 角 开 始 的 放射 性 渐 
变 ， 脸 的 左下 角 用 box-shadow 设置 一 个 阴影 模拟 自然 光线 使 之 有 立体 感 ， 除 胡子 需要 用 
transform 做 角度 变形 之 外 ， 其 他 都 是 一 些 线条 和 圆 块 ， 详 细 设 置 请 看 【范例 10-2】。 


【范例 10-2 头 部 和 脸 的 CSS3 代码 】 
3 /* 让 元 素 可 自由 定位 */ 





2 .doraemon{position:relative;} 

当局 .doraemon .headf{ 

4. width:320px;height:300px; /* 扁 扁 的 头 ， 非 正 圆 */ 

border-radius:150px; /* 圆 脸 ， 让 方形 角 变 成 贺 角 */ 

6. background:#07bbee; /* 脸 的 颜色 ,兼容 所 有 的 浏览 器 */ 

区 /* 这 个 放射 渐变 使 头 右上 角 有 白色 高 光 ， 头 的 左下 角 有 黑色 阴影 */ 

8 background:-webkit-radial-gradient (right top,#fff 10%,#07bbee 20%, 
#10a6ce 75%,#000); 

9 。 background:-moz-radial-gradient (right top,#fff 10%,#07bbee 20%, 

#10a6ce 75%,#000); 

9 background:-ms-radial-gradient (right top,#fff 10%,#07bbee 20%, 
#10a6ce 75%,#000); 

11. border:#555 2px solid; 

2 box-shadow:-5px 10px 15pPx rgba(0,0,0,0.45); 

3 position:relative; 

14. } 

5 /* 让 所 有 脸 部 元 素 可 自由 定位 */ 

16 . .doraemon .face{ position:relative;z-index:2;} 

下 9 /* 白 色 脸 底 */ 

185 .doraemon .face .white{ 

9 border:#000 2px solid; 

20% width:265px;height:195px; 

2 border-radius: 150px 150px; 

22。 position:absolute; 

3 top:75px;left:25px; 

24. background:#fff; 

2 /* 此 放射 渐变 也 是 使 脸 的 左下 角 瞳 一 些 ， 看 上 去 更 真实 */ 

26. background: -webkit-radial-gradient (right top,#fff 75%,#eee 80%, 
#999 90%,#444); 

2 background: -moz-radial-gradient (right top,#fff 75%,#eee 80%,#999 
90%,#444); 

28. background: -ms-radial-gradient (right top,#fff 75%,#eee 80%,#999 
90%,#444); 

29. . 

So /* 鼻 子 */ 

315 .doraemon .face .nose{ 

325 background:#C933007 

33。 width:30px;height:30px; 

as border:2px solid #000; 
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5 border-radius:30px; 


36. position:absolute;/* 绝 对 定位 */ 
3 top:110px;left:140px; 

38s z-index:3; 

39% 人 

40. ”/* 鼻 子 上 的 高 光 */ 

41. .doraemon .face .nose .light{ 

42. border-radius: 5px;box-shadow: 19PX 8px Spx #FFF; 
43. height:10px;width:10px; 

44. } 

45. /* 鼻 子 下 的 线 */ 

46. .doraemon .face .nose linef 

47. background:#333; 

48. width:3px;height:100px; 

49. top:143px;left:155px; 

SO position:absolute; 

tt z-index:3; 

时 2 } 

53000 /EX/ 

54. .doraemon .face .mouth{ 

S55 width:220px;height :400px; 

56. border-bottom:3px solid #333; 
-后 border-radius:120px; 

58. position:absolute; 

S59. top:-160px; left:45px; 

60. » 

61. /* 了 眼睛 */ 

62% .doraemon .eyes{position:relative; z-index:3;} 
635 .doraemon .eyes .eyel{ 

64. position:absolute;top:40px; 
65. width:72px;height:82px; 

66. background:#fff; 

67 border:2px solid #000; 

68. border-radius: 35px 35px; 

69,， . 

705 .doraemon .eyes .eye .black { 

Fe width:14px;height:14px; 

2 background: #000; 

3s border-radius: 14px; 

74. position:relative;top:40px; 

3 | 

76. .doraemon .eyes .left{left: 82px;} 
Ts .doraemon .eyes .right{left: 156px;} 
78. .doraemon .eyes .eye .bleft{left: S50px;} 
Ts .doraemon .eyes .eye .bright{left: 7px;} 
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80. 


/* 胡 须 背 景 ， 主 要 用 于 挡住 嘴巴 的 一 部 分 ， 不 要 显得 太 长 */ 


.doraemon .whiskerst{ 
background:#fff; 
width:220px;height:80px; 
position:relative; 
top:120px;left:45px; 
border-radius:15px; 
z-index:2; 

} 

/* 所 有 胡子 的 公用 样式 */ 
.doraemon .whiskers .whiskert{ 
background:#333; 

height: 2px;width: 60px; 
position: absolute;z-index:2; 

} 

/* 右 上 部 分 的 胡子 */ 

.doraemon .whiskers .rTop{ 
left:165px;top:25px; 

} 

.doraemon .whiskers .rt{ 
left: 167px;top:45px; 

.doraemon .whiskers .rBottom{ 
left:165px;top:65px; 

1 

/* 左 上 部 分 的 胡子 */ 

.doraemon .whiskers .lTop{ 
left:0;top:25px; 

.doraemon .whiskers .1t{ 
left:-2px;top:45px; 

} 

.doraemon .whiskers .lBottom{ 
left:0;top:65px; 

} 

/* 胡 子 旋转 角度 */ 


.doraemon .whiskers .rl160{ 


transform:rotate (160deg) ;-webkit-transform:rotate (160deg); 


} 
.doraemon .whiskers .r20{ 


transform: rotate(20deg);-webkit-transform:rotate(20deg); 
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10.5.2 脖子 和 铃 锚 

脖子 的 围巾 需要 注意 的 是 层次 级 别 ， 应 该 放置 在 最 高 层 ， 另 外 需要 用 线性 渐变 。 铃 销 是 
形 ， 用 border-radius 可 以 完成 ，HTML 代码 请 看 【范例 10-3】。 

【范例 10-3 脖子 和 铃 销 的 HTML 代码 】 


1. <div class="choker"> 











后 








2 <div class="bell"> 

3 <div class="bell line"></div> 
4. <div class="bell circle"></div> 
洒 <div class="bell under"></div> 
6. <div class="bell light"></div> 
到 </div> 

8. </div> 


这 个 choker 放置 在 doraemon 中 的 head 之 后 ， 对 应 的 CSS3 代码 请 看 【范例 10-4】。 
【范例 10-4 脖子 和 铃 锚 的 CSS3 代码 】 


TL /* 围 脖 */ 

2 .doraemon .choker{ 

3 position: relative;z-index:4; 

4. top: -40px;left: 45px; 

二 background:#C40; 

6 /* 线 性 渐变 让 围巾 看 上 去 更 自然 */ 

Wa background: -webkit-gradient (linear,left top,left bottom, 
from(#C40) ,to (#800400)); 

8% background: -moz-linear-gradient (center top,#c40,#800400); 

3 background: -ms-linear-gradient (center top,#c40,#800400); 

10。 border: 2px solid #000000; 

Te border-radius: 10px 10px 1l0px 10px; 

12. height: 20px;width: 230px; 

13' } 

A /* 铃 销 */ 

15。 .doraemon .choker .bellf{ 

16。 width:40px;height:40px; _overflow:hidden;/*IE6 hack*/ 

Ls border-radius:50px; 

Ll border:2px solid #000; 

下 人 background:#f9f12a7 

208 /* 线 性 渐变 让 铃 销 看 上 去 更 自然 */ 

“二 background: -webkit-gradient (linear, left top, left bottom, 
from (#f9f12a) ,color-stop(0.5, #e9ella), to(#a9a100)); 

2 background:-moz-linear-gradient (top,#f9f12a,#e9ella 75%,#a9al100); 

2 background:-ms-linear-gradient (top,#f9f1l2a, #e9ella 75%,#a9al00); 

24. box-shadow:-5px 5Px 10Px rgba(0,0,0,0.25) 7 
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49. 


51。 


53。 


position:relative; 
top:S5px;left:90px; 


/* 双 横 线 */ 

.doraemon .choker .bell line{ 
background:#F9F12A; 
border-radius: 3px 3px Opx 
border: 2px solid #333333; 
height: 2px;width: 36px; 


Opx? 


position: relative; top: 10px; 


} 

/* 铃 销 上 的 孔 */ 

.doraemon .choker .bell circle 
background:#0007 
border-radius: S5px; 
height: 10px; 
width: 12px; 
position: relative; 
top: 14px; left: 14px; 

} 

/* 铃 销 上 孔 下 的 缝隙 */ 

.doraemon .choker .bell under { 
background:#000; 
height: 15px;width: 3px; 
left: 18px;top: 10px; 
position: relative; 

1 

/* 铃 销 上 的 高 光 * / 

‘doraemon .choker .bell light { 
border-radius: 10px; 


{ 


box-shadow: 19px 8px Spx #FFF; 


height:12px;width:12px; 
left: Spx;top: -35px; 
position: relative; 
opacity: 0.77 


富有 立体 感 。 


10.5.3 身体 和 四 肢 


通过 实践 ， 可 以 发 现 阴影 和 渐变 能 够 更 加 逼真 地 模拟 事物 ， 使 之 看 起 来 更 加 自然 、 更 加 


身体 部 分 主要 有 四 肢 和 白色 肚 忽 ， 外 加 肚 折 上 的 魔法 口袋 ， 这 是 哆 啦 A 梦 最 经 典 的 识别 
标志 之 一 。 实 现 思路 很 简单 ， 用 和 拢 形 绘制 身体 ， 用 圆 绘 制 肚 吃 ， 用 





# 圆 绘制 口袋 即 可 ， 四 肢 
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也 可 以 分 解 为 矩形 和 圆 ， 只 是 要 变换 一 下 角度 。 有 具体 代码 请 看 【范例 10-5】 。 
范例 10-5 身体 和 四 肢 的 HTML 代码 】 


1. <div class="bodys"> 


之 <div class="body"></div> 

3 <div class="wraps"></div> 

4. <div class="pocket"></div> 

Ds <div class="pocket mask"></div> 
6. </div> 

7. <div class="hand right"> 

9- <div class="arm"></div> 

9 <div class="circle"></div> 

10. <div class="arm rewrite"></div> 
Ll </div” 

12. <div class="hand left"> 

35 <div class="arm"></div> 

14. <div class="circle"></div> 

下 岳 <div class="arm rewrite"></div> 
16. </div> 

17. <div class="foot"> 

8 <div class="left"></div> 

19. <div class="right"></div> 

2 <div class="foot rewrite"></div> 
21. </div> 


身体 和 四 肢 的 HTML 代码 结构 不 复杂 ， 在 CSS 代码 中 也 仅 需 要 注意 两 腿 之 间 颜 色 要 深 
- 些 才 有 立体 感 ， 耕 则 就 像 一 张 纸 皮 ， 胎 膊 连接 处 用 div 遮挡 一 下 身体 和 矩形 的 连接 线 使 之 看 
上 去 更 符合 服装 设计 的 常理 。 

接 下 来 看 看 【范例 10-6】 的 CSS 代码 。 


【范例 10-6 身体 和 四 肢 的 CSS 代码 】 


r .doraemon .bodys{position: relative;top:-310px;} 

本 WW 

四 .doraemon .bodys .body{ 

4. background:#07BEEA; /* 不 支持 CSS3 的 IE 会 显示 色 块 */ 

i background: -webkit-gradient (linear,right top,left top,from(#07beea) 
color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be)); 

6 background: -moz-linear-gradient (right center,#07beea,#0073b3 
50%, #00b0e0 75%,#0096be 100%); 

本 background: -ms-linear-gradient (right center,#07beea,#0073b3 50%, 
#00b0e0 75%,#0096be 100%); 

Ge border: 2px solid #333; 

9 height: 165px;width: 220px;position: absolute;left: 50px;top:265px; 

LO , 
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1 
2 
35 
14. 


LS 


6 


二 品 
18% 
Ls 
20。 
21。 
2 
23% 
24。 
25, 
26- 


2 


28. 


295 
30 . 
Se 
32e 
33. 
34. 
35。 
36 . 
3375 
38 . 
39. 
40. 
41. 
42. 
43。 
44. 
45。 
46. 
47. 


V* 自 色 胜 儿 #7 

.doraemon .bodys .wraps{ 
background: #FFF; /* 不 支持 CSS3 的 IE 会 显示 色 块 */ 
background: -webkit-gradient (linear, right top, left bottom, 
from(#fff),color-stop (0.75, #fff),color-stop (0.83,#eee) ,color- 
stop(0.90,#999) ,color-stop (0.95,#444), to(#000)); 

background: -moz-linear-gradient (right top,#FFF,#FFF 75%,#EEE 83%,#999 

90%,#444 95%,#000); 
background: -ms-linear-gradient (right top,#FFF,#FFF 75%,#EEE 
83%,#999 90%,#444 95%,#000); 

border: 2px solid #000; 
border-radius: 85px; /* 肚 兜 实际 是 一 个 大 圆 */ 
position: absolute; height:170px;width:170px;left:72px;top:230px; 

} 

/* 口 找 */ 

.doraemon .bodys .pocket{ 
position:relative;width:130px;height:130px; 
border-radius:65px; 
background:#fff; /* 不 支持 CSS3 的 IE 会 显示 色 块 */ 
background: -webkit-gradient (linear, right top, left bottom, 
from (#fff) ,color-stop (0.70,#fff) ,color-stop(0.75,#f8f8f8)，color- 
stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff)); 
background: -moz-linear-gradient (right top, #fff, #fff 70%, 
#f8f8f8 75%,#eee 80%,#ddd 88% , #fff); 
background: -ms-linear-gradient (right top, #fff, #fff 70%,#f8f8f£8 
75%,#eee 80%,#ddd 88% , #fff); 
border:2px solid #000;top:250px;left:92px; 

} 

/* 挡 住 口袋 一 半 */ 

.doraemon .bodys .pocket mask{ 
position:relative;width:134px;height:60px; 
background:#fff; /* 不 支持 CSS3 的 IE 会 显示 色 块 */ 
border-bottom:2px solid #000;top:125px;left:92px; 

» 

We 

.doraemon .hand right{ 

height: 100px;width: 100px;position: absolute; 
top: 272px;left: 248px; 

} 

fe Bh 

‘doraemon .hand left{ 

height: 100px;width: 100px; 
Position: absolute; top: 272px;left:-10px; 

} 

/* 手 臂 公共 部 分 */ 


165 


48. 
49. 
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5 


52. 


53。 
54. 
55% 
56, 
Sa 
58. 
59- 
60. 
63 
62. 
63% 
64. 
65. 
66. 
67. 
68. 
9 
TO0s 
732, 
93. 


74. 


75。 
76 . 
Te 
78. 
IT9s 
80. 
81. 
82. 
83 . 
84. 
85. 
86. 
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.doraemon .arm { 
background:#07BEEA; /* 不 支持 CSS3 的 IE 会 显示 色 块 */ 
background: -webkit-gradient (linear, left top, left bottom, 
from(#07beea) ,color-stop (0.85,#07beea), to(#555)); 
background: -moz-linear-gradient (center top , #07BEEA, #07BEEA 
85%, #555); 
background: -ms-linear-gradient (center top , #07BEEA, #07BEEA 85%, 
#555); 
border: lpx solid #000000; 
box-shadow: -10Px 7Px 1l0px rgba(0, 0, 0, 0.35); 
height: S50px;width: 80px;z-index:-1;position: relative; 
, 
企 石 于 于 同人 
.doraemon .hand right .arm { 
top: 17px;transform: rotate(35deg) ;-webkit-transform:rotate (35deg) ; 
| 
/* 左 手 手臂 */ 
.doraemon .hand left .arm { 
top:17px;background:#0096BE;box-shadow: 5px-7px 10Px rgba(0,0,0,0.25); 
transform: rotate(145deg);-webkit-transform:rotate(145deg); 
/* 圆 形 手掌 公共 部 分 */ 
.doraemon .circle{ 
position:absolute; 
width:60px;height:60px; 
border-radius:30px; 
border:2px solid #000; 
background:#fff; /* 不 支持 CSS3 的 IE 会 显示 色 块 */ 
background: -webkit-gradient (linear, right top, left bottom, 
from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop 
(0.8,#ddd), to(#999)); 
background: -moz-linear-gradient (right top, #fff, #fff 50%, #eee 
70%, #ddd 80%,#999); 
: 
je 
.doraemon .hand right .circle{ 
left:40px;top:32px; 
} 
和 二 党 < 
.doraemon .hand left .circle{ 
left:-20px;top:32px; 
} 
/* 手 辟 和 身体 结合 处 */ 
.doraemon .arm rewrite{ 
background:#07BEEA; 


BL height: 45px;width:S5px;position: relative; 


88. } 

89. /* 右 手 结合 处 */ 

90. .doraemon .hand right .arm rewrite{ 

91。 top: -45px;left:22px; 

92. } 

93. /* 左 手 结合 处 */ 

94. .doraemon .hand left .arm rewrite{ 

95。 top: -45px;left:60px;background:#0096be 

96. } 

97. /* 脚 */ 

98. .doraemon .foot { 

99. height: 40px;left: 20px; 

OO position: relative; top: -14lpx;width: 280px; 

LOLs } 

102.。  /* 左 脚 */ 

035 .doraemon .foot .left { 

104. background:#fff; 

Lt05e background: -webkit-gradient (linear, right top, left bottom,from 
(#£ff),color-stop(0.75, #fff),color-stop(0.85,#eee) ,to (#999) )»; 

106. background: -moz-linear-gradient (right top , #fff, #fff 75%, #EEE 
85%, #999); 

Es background: -ms-linear-gradient (right top, #fff, #fff 75%, #EEE 85%, 
#999); 

108. border: 2px solid #333; 

109. border-radius: 80px 60px 60px 40px; 

0 box-shadow: -6px 0 10Px rgba(0, 0, 0, 0.35); 

Le height: 30px;left: 8px;position: relative;top:65px; width: 125px; 

112% } 


113. /* 右 脚 */ 
114. .doraemon .foot .right { 


EL background:#fff; 
5 background: -webkit-gradient (linear, right top, left bottom, from 
(#£ff£),color-stop(0.75,#fff),color-stop (0.85,#eee), to (#999)); 

和 background: -moz-linear-gradient (right top , #fff, #fff 75%, #EEE 
85%, #999); 

118. background: -ms-linear-gradient (right top , #fff, #fff 75%, #EEE 85%, 
#999); 

人 border: 2px solid #333; 

120% border-radius: 80px 60px 60px 40px; 

121. box-shadow:-6px 0Px 10pPx rgba(0,0,0,0.35); 

22 -= height: 30px;width: 125px;top:31lpx;left:141lpx;position: relative; 

3 , 

124. .doraemon .foot .foot_rewritef 

了 23 position:relative;top:-1llpx;left:130px;_left:127px; 
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2 width:20px;height:10px;background:#fff; 
/* 用 一 个 半圆 来 模拟 双 脚 之 间 的 缝隙 */ 


有 background: -webkit-gradient (linear, right top, left bottom, 
from(#666),color-stop (0.83,#fff), to(#fff)); 

285 background: -moz-linear-gradient (right top, #666, #fff 83%, #fff); 

29 background: -ms-linear-gradient (right top, #666, #fff 83%, #fff); 

0 border-top:2px solid #000; 

3 border-right:2px solid #000; 

E32 border-left:2px solid #000; 

3 border-top-right-radius:40px; 

134. border-top-left-radius:40px; 

L935 } 


到 这 里 ， 基 本 大 功 告 成 ， 对 于 不 支持 CSS3 的 下 6 也 能 看 到 大 概 的 样子 ， 只 是 IE 6 下 的 
机 器 猫 像 一 个 “苦瓜 脸 ”。 


10.5.4 让 眼睛 动 起 来 


眼睛 是 心灵 的 窗户 ， 那 么 眼睛 应 该 更 加 有 活力 一 些 才 是 ， 就 让 眼睛 动 起 来 吧 ! 利用 
keyframes 设置 一 个 定时 动画 ， 让 black 眼睛 移动 位 置 即 可 。 动 画 的 详细 用 法 将 在 第 11 章 介 
绍 ， 这 里 先 让 读者 预览 一 下 。 


/* 让 眼睛 动 起 来 ， 自 定义 一 个 定时 动画 函数 */ 

@-webkit-keyframes eyemove{ 
80%{margin:0;} 
85%{margin:-20px 0 0 0;} 
90%{margin:0 0 0 0;} 
93%{margin:0 0 0 7px;} 
96%{margin:0 0 0 0;} 

} 

@-moz-keyframes eyemove{ 
80%{margin:0;} 
85%{margin:-20px 0 0 0;} 
90%{margin:0 0 0 0;} 
93%{margin:0 0 0 7px;} 
96%{margin:0 0 0 0;} 

. 

@-ms-keyframes eyemove{ 
80%{margin:0;} 
85%{margin:-20px 0 0 0;} 
90%{margin:0 0 0 0;} 
93%{margin:0 0 0 7px;} 
96%{margin:0 0 0 0;} 
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/* 调 用 自 定义 的 动画 */ 

.doraemon .eyes .eye .black { 
-webkit-animation-name: eyemove; 
-webkit-animation-duration: 5s; 
-webkit-animation-timing-function: linear; 
-webkit-animation-iteration-count: 20000; 
-moz-animation-name: eyemove; 
-moz-animation-duration: 5s; 
-moz-animation-timing-function: linear; 
-moz-animation-iteration-count: 20000; 
-ms-animation-name: eyemove; 
-ms-animation-duration: 5s; 
-ms-animation-timing-function: linear; 
-ms-animation-iteration-count: 20000; 


10.6 相关 参考 


用 CSS3 绘制 艺术 图 形 时 ， 需 要 有 一 定 的 艺术 审美 ， 否 则 多 好 的 工具 在 手中 都 发 挥 不 了 
它 的 作用 。 由 于 HTML5 和 CSS3 很 多 功能 设计 都 借鉴 于 Photoshop 等 平面 设计 软件 和 Flash 
等 动画 设计 软件 ， 所 以 读者 可 以 去 以 下 网 站 参考 一 些 设计 构图 、 图 形 分 解 等 相关 设计 知识 。 

e@_ http://flash8.net/ 一 一 闪 吧 ， 专 业 的 Flash 学 习 和 传播 网 站 。 

e@ http:W/www.blueidea.com/ 一 一 蓝 色 理想 ， 网 站 设计 与 开发 人 员 之 家 。 

@ http://www.68design.net/ 一 一 网 页 设计 师 联盟 ， 国 内 网 页 设计 综合 门户 
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第 11 章 酷 炉 的 CSS3 动画 效果 
一 一 3D 旋转 方块 


是 动画 技术 年 代 ， 一 切 都 可 以 靠 科 技 来 轻松 完成 ! 
一 一 宫 崎 骏 


还 记得 那些 可 爱 的 皮影 戏 吗 ?还 记得 胶片 电影 吗 ? 它们 让 一 张 张 死板 的 剪纸 、 一 格格 静 
态 的 照片 在 我 们 眼前 活灵活现 起 来 。 而 今天 我 们 也 要 让 网 页 上 呆板 的 图 片 和 文字 跳动 起 来 ， 
这 一 切 不 过 是 为 了 让 生活 更 加 多 姿 多 彩 。 有 位 哲人 说 这 世界 唯一 不 变 的 是 运动 ， 静 止 只 是 相 
对 的 ， 那 些 简单 的 、 静 止 的 网 页 即将 成 为 历史 ， 因 为 CSS3 来 了 ， 它 能 够 让 全 世界 的 网 页 都 
跳动 起 来 。 

本 章 主要 知识 点 : 


. 
全 
. 
. 


11.1 文本 描 边 和 文本 填充 色 


前 面 第 10 章 曾 用 text-shadow 来 模拟 简单 的 文本 描 边 效 果 ， 另 外 还 有 text-stroke 文本 描 
边 和 text-fill-color 文本 填充 ， 这 两 个 功能 在 Photoshop 里 也 是 常常 用 到 的 。 

文本 描 边 text-stroke 和 文本 填充 text-fill-color 的 设计 意图 是 很 好 的 ， 只 是 各 个 浏览 器 在 
实现 方面 还 有 一 些 差距 ， 目 前 ， 仅 有 Chrome、Safari 和 Opera 以 私有 属性 方式 支持 ，IE 和 
Firefox 还 没有 支持 ， 如 表 11-1 所 示 。 


表 11-1 各 个 浏览 器 对 text-stroke 和 text-fill-color 属性 最 早 开 始 支持 的 版 本 
浏览 器 





柜 Safari Firefox Opera Chrome Android Browser 





性 i 二 it- - i -webkit 
RR x 31 Webkit x 15 ‘webkit- 40 Webkit 2 1webki 


-webkit -Webkit- -webkit- -webkit 
text-fill-color x 3 x 15 4.0 2.1 














对 于 text-fill-color 的 统计 并 不 是 很 准确 ， 有 资料 说 Safari 从 5.1 版 开始 支持 ，Chrome 从 
13 版 开始 支持 ， 这 对 于 PC 端 编程 应 该 无 太 大 关系 。 


11.1.1 文本 描 边 (text-stroke) 

text-stroke 也 是 一 个 复合 属性 ， 设 置 或 检索 对 象 中 的 文字 的 描 边 ， 语 法 如 下 ， 其 值 详 见 
表 11-2。 

七 ext- Stroke: [ text-stroke-width ] || [ text-stroke-color ] 


表 11-2 text-stroke 属性 语法 


值 说 明 
必需 ， 设 置 或 检索 对 象 中 文字 的 描 边 厚度 
必需 ， 设 置 或 检索 对 象 中 文字 的 描 边 颜色 








目前 ， 由 于 只 有 webkit 内 核 浏 览 器 支持 ， 所 以 使 用 的 时 候 仅 仅 能 使 用 webkit-* 这 样 的 方 
式 来 书写 CSS， 比 如 “-webkit-text-stroke: 1.0px #FF0000;”， 意 思 是 给 文字 加 1 像素 的 红色 
描 边 ， 效 果 如 图 11-1 所 示 。 


11.1.2 文本 填充 (text-fill-color) 


text-fill-color 的 作用 是 检索 或 设置 对 象 中 的 文字 填充 颜色 。 它 和 color 属性 有 些 相 似 ， 都 
能 够 设置 对 象 中 的 文字 填充 颜色 。 两 者 的 区 别 是 ， 若 同时 设置 text-fill-color 和 color，text-fill- 
color 定义 的 颜色 将 覆盖 color 属性 。 

通过 text-fill-color 加 上 其 他 属性 配合 可 以 制作 出 镁 空 和 渐变 填充 文字 。 

color: green; 

-webkit-text-fill-color: transparent; 

-webkit-background-clip: text; 

background-image: -webkit-gradient (linear,left top,left bottom,from(green), 

to (#C1FDOO)); 

font-size: S50px; 

其 中 text-fill-color 填充 的 颜色 是 透明 的 ， 利 用 第 10 章 讲解 过 的 线性 渐变 填充 一 个 渐变 
色 ， 填 充 在 哪里 呢 ? 正常 情况 下 是 填充 在 背景 上 ， 但 是 可 通过 background-clip 属性 将 其 指定 
填充 到 文本 文字 上 ， 如 此 渐变 文字 就 设置 出 来 了 ， 请 看 图 11-1 所 示 的 效果 。 

如 果 不 设置 background-clip 和 线性 渐变 填充 ， 那 么 出 来 的 效果 就 是 一 个 铁 空 文字 效果 ， 
前 提 是 字体 要 相对 大 一 些 。 





| 


U3) 





text-fill-color( 文 本 填充 色 ) 





textrfill=-color( 文 本 填充 色 ) 


图 11-1 文本 描 边 、 渐 变 填充 文本 和 镁 空 文本 


11.2 变形 和 变形 原点 


在 第 10 章 绘制 哆 啦 A 梦 的 时 候 ， 同 样 用 到 了 变形 (transform) ， 本 节 就 来 详细 介绍 在 
CSS3 动画 中 占据 重要 作用 的 transform， 表 11-3 列 出 了 最 早 支持 transform 属性 的 浏览 器 及 其 
版 本 。 





表 11-3 各 浏览 器 对 transform 属性 最 早 开始 支持 的 版 本 





13 Safari Firefox Opera Chrome Android Browser 





| usom | 9™ | 31 -webkit- 1 5-webkit- 而 Owebkit- 21 -webkit- 








其 中 IE 9 是 私有 属性 的 支持 方式 ，Opera 在 早期 使 用 私有 属性 -o-， 后 来 到 15 版 的 时 候 
始 用 webkit 内 核 ， 书 写 CSS 代码 时 需要 注意 一 下 。 








11.2.1 变形 (transform) 

transform 属性 的 作用 是 向 元 素 应 用 2D 或 3D 转换 ， 人 允许 对 元 素 进行 旋转 、 缩 放 、 移 动 或 
倾斜 语法 如 下 ， 其 值 详 见 表 11-4。 
transform: none[transform-functions]..[transform-functions] 


表 11-4 transform 属性 语法 的 函数 值 




















函数 值 说 明 

none 定义 不 进行 转换 

matrix(n,n,n,n,n,n) 定义 2D 转换 ， 使 用 6 个 值 的 矩阵 
matrix3d(n.nn.nnnnnnnnnnnnn) | 定义 3D 转换 ， 使 用 16 个 值 的 4X4 和 矩阵 





2 


( 续 表 ) 




















函数 值 说 明 

translate(x,y) 定义 2D 转换 

translate3d(x,y,Z) 定义 3D 转换 

translateX(x) 定义 转换 ， 只 是 用 X 轴 的 值 
translateY(y) 定义 转换 ， 只 是 用 Y 轴 的 值 
translateZ(z) 定义 3D 转换 ， 只 是 用 Z 轴 的 值 
scale(x,y) 定义 2D 缩放 转换 

scale3d(x,y,z) 定义 3D 缩放 转换 

scaleX(x) 通过 设置 X 轴 的 值 来 定义 缩放 转换 
scaleY(y) 通过 设置 Y 轴 的 值 来 定义 缩放 转换 
scaleZ(z) 通过 设置 Z 轴 的 值 来 定义 3D 缩放 转换 
rotate(angle) 定义 2D 旋转 ， 在 参数 中 规定 角度 
rotate3d(x,y,z,angle) 定义 3D 旋转 

rotateX(angle) 定义 沿 着 X 轴 的 3D 旋转 

rotateY (angle) 定义 沿 着 Y 轴 的 3D 旋转 
rotateZ(angle) 定义 沿 着 Z 轴 的 3D 旋转 
skew(x-angle,y-angle) 定义 沿 着 X 和 YY 轴 的 2D 倾斜 转换 
skewX(angle) 定义 沿 着 X 轴 的 2D 倾斜 转换 
skewY (angle) 定义 沿 着 Y 轴 的 2D 倾斜 转换 
perspective(n) 为 3D 转换 元 素 定义 透视 视图 








表 11-3 中 出 现 了 很 多 “2D 转换 ”和 “3D 转换 ”， 那 么 “2D 转换 ”和 “3D 转换 ”到 底 
是 什么 ? 两 者 又 有 何 区 别 和 联系 ? 

“转换 ”在 各 种 资料 中 出 现 的 次 数 很 多 ， 所 以 大 家 习惯 上 这 样 称呼 ， 从 transform 的 英文 
字面 意思 来 理解 ， 它 有 “改变 ”的 意思 ， 能 够 使 对 象 产 生变 化 ，“ 改 变 ” 的 是 什么 呢 ?” 是 对 
象 的 形状 、 对 象 的 大 小 、 对 象 的 位 置 等 ， 其 中 2D 和 3D 是 人 在 感官 上 的 感受 差异 ， 因 为 显示 
器 一 直 都 是 平面 的 ， 直 观 上 是 显示 2D 即 平面 的 图 形 ， 而 3D 就 是 模拟 的 立体 图 形 。2D 只 有 
左右 、 上 下 两 个 方向 ， 而 3D 则 增加 了 一 个 前 后 方向 ， 用 来 描绘 现实 世界 中 物体 的 前 后 面 。 

下 面 通过 实例 图 形 (如 图 11-2 所 示 ) 来 说 明 2D 图 形 和 3D 图 形 在 变化 时 的 差异 ，2D 图 
形 在 旋转 时 ， 只 有 顺 时 针 和 逆 时 针 两 种 旋转 方式 ， 而 3D 模式 下 ， 前 后 面 、 左 右面 、 上 下 面 
两 两 组 合 的 平面 都 可 以 顺 时 针 和 逆 时 针 旋 转 ， 形 成 3 组 互 不 干扰 的 “2D 转换 ”模式 。 
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图 11-2 2D 图 形 和 3D 图 形 逆 时 针 旋 转 对 比 


transform 属性 可 设置 需要 调用 的 方法 ， 除 默认 的 none 值 之 外 ， 由 于 目前 很 多 浏览 器 不 
支持 3D 转换 的 方法 ， 所 以 本 书 重点 介绍 2D 转换 ， 其 中 rotate 在 绘制 哆 啦 A 梦 的 时 候 已 经 接 
触 过 ， 能 够 让 对 象 在 2D 平面 上 进行 旋转 ， 图 11-3 就 是 让 正方 形 进行 角度 旋转 变换 的 示意 
图 ， 代 码 如 下 : 


Transform:rotate (30deg); 


图 11-3 transform 的 旋转 示意 图 


使 用 skew 方法 可 以 实现 文字 或 图 像 的 倾斜 效果 ， 在 参数 中 分 别 指定 垂直 方向 上 的 倾斜 
角度 与 水 平方 向 上 的 倾斜 角度 ， 如 图 11-4 所 示 。 通 过 表 11-4 可 知 ，skew 方法 有 两 个 参数 ， 
但 是 这 两 个 参数 可 以 修改 成 只 使 用 一 个 参数 ， 省 略 另 一 个 参数 ， 这 不 是 说 水 平方 向 和 重 直 方 
向 一 样 ， 这 种 情况 视 为 只 在 水 平方 向 倾斜 ， 垂 直方 向 上 不 倾斜 。 另 外 ， 参 数 接受 负数 。 


transform:skew(0deg>30deg) transform: skew(30deg, 0deg) 


图 11-4 skew 方法 示意 图 
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使 用 translate 方法 可 以 实现 将 文字 或 图 像 移动 ， 在 参数 中 分 别 指定 水 平方 向 上 的 移动 距 
离 与 垂直 方向 上 的 移动 距离 ， 例 如 “transform:translate(50px, 50px) ”表示 水 平方 向 上 移动 50 
个 像素 、 垂 直方 向 上 移动 50 个 像素 。translate 方法 比较 好 理解 ， 它 和 skew 方法 类 似 ， 可 以 
省 略 另 一 个 参数 ， 这 种 情况 视 为 只 在 水 平方 向 移动 ， 垂 直方 向 上 不 移动 。 

可 使 用 scale 方法 实现 文字 或 图 像 的 缩放 效果 ， 参 数 中 指定 缩放 倍率 ， 例 如 “scale(1.2， 
0.8)” 表 示 X 轴 放 大 120%，Y 轴 缩 小 80%， 效 果 如 图 11-5 所 示 。 参 数 可 以 是 整数 ， 也 可 以 
是 小 数 。 





scale(0. 6) 


11-5 scale 缩放 示意 图 


matrix 方法 是 一 个 集合 性 质 的 方法 ， 其 基本 语法 是 “transform: matrix(a, c, b, d, e, D”， 
其 中 a、d 相当 于 scale 方法 的 两 个 参数 ;，e、f 相 当 于 translate 方法 的 两 个 参数 ，c、b 相当 于 
skew 方法 的 两 个 参数 。 

到 这 里 ， 读 者 可 能 觉得 transform 是 CSS3 中 最 为 复杂 的 对 象 ， 其 实用 过 photoshop 都 应 
该 知道 里 面 的 Ctrl+T 自由 变换 ，transform 就 相当 于 “自由 变换 ”。 





11.2.2 变形 原点 〈transform-origin ) 

使 用 transform 进行 文字 或 图 像 变形 的 时 候 ， 是 以 元 素 的 中 心 点 为 原点 进行 的 。 使 用 
transform-origin 属性 允许 你 改变 被 转换 元 素 的 原点 位 置 。 如 果 是 2D 转换 元 素 ， 则 能 够 改变 
元 素 X 和 立轴 ， 如 果 是 3D 转换 元 素 还 能 改变 其 Y 轴 。 

其 语法 一 般 为 transform-origin: x yz， 其 值 及 说 明 如 表 11-5 所 示 。 


表 11-5 transform-origin 属性 值 说 明 








定义 视图 被 置 于 X 轴 的 何 处 ， 可 能 的 值 为 : 
*» left 
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( 续 表 ) 















说 明 

定义 视图 被 置 于 Y 轴 的 何 处 ， 可 能 的 值 为 : 
» top 

* center 

* bottom 





* length 
*% 
定义 视图 被 置 于 乙 轴 的 何 处 ， 可 能 的 值 为 : 
* length 


值得 注意 的 是 ，transform-origin 必须 与 transform 属性 一 同 合用， 否则 无 效 ， 结 合 前 面 的 
skew 方法 ， 通 过 图 11-6， 可 以 看 到 使 用 transform-origin 前 后 的 差别 。 












transfora: skew (0deg, 30deg) transform: skew (30deg, 0deg) 





图 11-6 设置 transform-origin 后 的 变形 


图 11-6 是 设置 了 “transform-origin:0 0” 后 的 效果 ， 对 比 图 11-3 和 图 11-4 可 以 明确 体会 
到 其 效果 差异 。 


11.3 简单 应 用 一 一 飞行 旋转 文本 


通过 对 transform 的 简单 介绍 ， 知 道 transform 可 以 让 对 象 做 到 很 多 变化 ， 本 节 就 做 一 个 

来 回 飞行 的 文字 特效 ， 并 使 文字 在 来 回 飞行 的 过 程 中 进行 旋转 。 要 完成 这 个 任务 还 需要 认识 
“下 CSS3 的 动画 属性 。 

在 CSS3 中 ， 实 现 动 画 效 果 有 两 种 方式 : transition 和 animation。 各 浏览 器 对 animation 的 
支持 普遍 比 transition 早 。 不 过 ， 早 在 Firefox 4.0、Chrome 4.0、Safari 3.1、Opera 10.5 时 就 已 
经 用 私有 属性 对 transition 属性 给 予 了 支持 ， 而 标准 化 支持 版 本 相差 很 大 ， 有 具体 情况 如 表 11-6 
所 示 。 
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表 11-6 各 浏览 器 对 动画 相关 属性 最 早 开 始 支持 的 版 本 











sa 
[3 Safari Firefox pera Chrome Android Browser 
2 1-webkit- 
4 
4 -webkit- -webkit- -webkit- 





@keyframes 4 Zl 





Opera 自 15 版 开始 就 使 用 Chrome 一 样 的 WebKit 内 核 ， 所 以 需要 用 -webkit 私有 前 级 ， 
ER 这 里 的 12.1 是 指 它 自己 以 前 的 Presto 内 核 支持 版 本 。 





11.3.1 过 渡 动 画 (transition) 


虽然 transition 是 后 来 者 ， 但 是 它 的 作用 很 强大 ， 能 够 平滑 地 改变 任意 CSS 属性 值 。 无 论 
是 单 击 事件 、 焦 点 事件 ， 还 是 鼠标 hover， 只 要 能 让 CSS 值 改 变 ， 就 会 产生 平滑 的 过 渡 效 
果 ， 也 就 是 动画 。 

transition 属性 是 一 个 简写 属性 ， 用 于 设置 4 个 过 渡 属性 ， 详 见 表 11-7， 其 用 法 为 


transition: property duration timing-function delay。 


表 11-7 transition 关联 属性 说 明 





属性 说 明 
transition-property 规定 设置 过 渡 效 果 的 CSS 属性 的 名 称 
transition-duration 规定 完成 过 渡 效 果 需 要 多 少 秒 或 毫秒 


规定 速度 效果 的 速度 曲线 。 其 值 有 : 

ease- 默 认 。 动 画 以 低速 开始 ， 然 后 加 快 ， 在 结束 前 变 慢 
linear -动画 从 头 到 尾 的 速度 是 相同 的 
transition-timing-function ease-in -动画 以 低速 开始 

ease-out -动画 以 低速 结束 

ease-in-out -动画 以 低速 开始 和 结束 

cubic-bezier(nn,nn) -n 可 能 的 值 是 从 0 到 1 的 数值 
transition-delay 定义 过 渡 效 果 何 时 开始 

















例如 ， 我 们 要 实现 网 页 所 有 连接 ， 当 鼠标 悬 停 时 颜色 由 蓝 变 红 。 


a{color:blue;font-size:12px;} 
a:hover{ 
color: red; 
transition:color .25s linear; // 指 定 color 属性 为 渐变 对 象 
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} 


那么 现在 ， 当 鼠标 经 过 一 个 链接 时 ， 不 会 直接 从 蓝 色 跳 转 到 红色 ， 而 是 用 四 分 之 一 秒 的 
时 间 逐 渐变 换 它们 的 中 间 颜 色 ( 过 渡 颜 色 )， 如 图 11-7 所 示 。 


11-7 transition 过 渡 动 画 示意 图 


这 是 设置 一 个 属性 过 渡 的 方式 ， 如 果 要 设置 多 个 属性 怎么 办 ? 比如 在 变色 的 时 候 ， 字 体 
同时 变 大 ， 其 代码 如 下 : 
a:hover{ 
color:red;font-size:14px; 
transition:color .25s ease-in-out,font-size .25s ease-in-out; 
// 同 时 指定 color 和 font-size 属性 为 渐变 对 象 
} 
另外 ，transition 还 可 以 设置 一 个 通 配 属性 all， 能 够 匹配 所 有 改变 的 CSS 属性 参与 渐变 。 
比如 上 面 的 语句 还 可 以 写 为 “transition:all 0.25s ease-in-out”。 


11.3.2 自 定 义 动画 (animation ) 和 @keyframes 


animation 功能 和 transition 差不多 ， 都 能 通过 改变 CSS 的 属性 值 来 实现 动画 效果 ， 它 们 
的 不 同 之 处 是 : transition 只 能 通过 指定 属性 的 开始 值 和 结束 值 来 达到 渐变 ， 渐 变 的 时 间 控 制 
相当 是 内 置 而 无 法 自 定义 ，animation 则 能 解决 这 个 问题 ， 像 Flash 定义 关键 帧 那样 来 实现 比 
较 复 杂 的 动画 效果 ， 以 满足 更 高 级 的 应 用 。 

animation 属性 同样 是 一 个 简写 属性 ， 用 于 设置 6 个 动画 属性 ， 详 见 表 11-8， 其 用 法 为 


animation : name duration timing-function delay iteration-count direction 。 


表 11-8 animation 关联 属性 说 明 











说 明 
@keyframes 
animation-name 规定 需要 绑 定 到 选择 器 的 keyframe 名 称 
animation-duration 规定 完成 动画 所 花费 的 时 间 ， 以 秒 或 毫秒 计 
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( 续 表 ) 





值 说 明 

规定 动画 的 速度 曲线 。 其 值 有 : 

e ease: 默认 。 动 画 以 低速 开始 ， 然 后 加 快 ， 在 结束 前 变 慢 

e linear: 动画 从 头 到 尾 的 速度 是 相同 的 
animation-timing-function e ease-in: 动画 以 低速 开始 

e ease-out: 动画 以 低速 结束 

e ease-in-out: 动画 以 低速 开始 和 结束 

®@ cubic-bezier(n,n,n,n); n 可 能 的 值 是 从 0 到 1 的 数值 











animation-delay 规定 在 动画 开始 之 前 的 延迟 
animation-iteration-count 规定 动画 应 该 播放 的 次 数 。 默 认为 1，infinite 为 无 限 次 播放 


animation-direction 规定 是 否 应 该 轮流 反 向 播放 动画 


a 规定 动画 是 否 正在 运行 或 暂停 。 默认 是 running。 注 意 : 这 是 一 个 无 法 用 
imation play state animation 简写 而 需要 单独 控制 的 属性 








animation 主要 调用 @keyframes 定义 的 动画 ， 它 是 控制 动画 的 主要 工具 ， 其 语法 是 
@keyframes animationname {keyframes-selector {css-styles:}}， 对 于 其 中 每 一 个 对 象 请 看 表 11-9 中 
的 详细 说 明 。 


表 11-9 @keyframes 详细 说 明 


animationname 必需 ， 定 义 动画 的 名 称 


必需 ， 动 画 时 长 的 百分比 ， 合 法 的 值 为 : 





® 0~100% 
e from (与 0% 相同 ) 
e to( 与 100% 相同 ) 


keyframes-selector 





css-styles 必需 ， 一 个 或 多 个 合法 的 CSS 样式 表达 式 








11.3.3 飞行 旋转 的 文本 


介绍 完 CSS 动画 的 几 个 主要 属性 之 后 ， 我 们 通过 一 个 实例 来 使 用 这 些 CSS 属性 ， 看 是 否 
易于 使 用 。 

首先 要 创建 一 个 HTML 文档 ， 构 建 HTML 框架 代码 ， 在 <body> 标 签 中 添加 一 个 a 元 
素 ， 文 本 为 “飞行 旋转 的 CSS3”。 接 下 来 用 CSS3 控制 其 左右 来 回 “ 飞 行 ”并 进行 “ 旋 
转 ”， 具体 请 见 【 范 例 11-1】 的 代码 。 

【范例 11-1 飞行 旋转 的 CSS3 文 本 】 


Ls <!DOCTYPE html> 
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<html> 

<head> 

<meta charset="utf-8" /> 

<title>CSS3 旋转 文字 </title> 

<style> 

fly{ 
animation:anim 6s ease-out infinite; 
-webkit-animation:anim 6s ease-out infinite; 
position:absolute; 
/* 用 absolute 或 relative 使 对 象 脱离 文档 流 ， 便 于 动画 控制 */ 

@-moz-keyframes animf{ 
0%{left:0;} 
S50%{1left:50%;transform:rotate(3600deg) scale(2,2);color:red;} 
100%{1left:0;} 

于 

@-webkit-keyframes animf{ 
0%{left:0;-webkit-transform:rotate(0deg) scale(1,1);} 
/* 时 间 刚 过 一 半 的 那个 ` 关 键 点 */ 


S50%{ 
left:50%; /* 控 制 其 位 置 向 右 移 动 50% 的 距离 ， 本 例 为 页 面 中 央 */ 
-webkit-transform:rotate(3600deg) scale(2,2); 
/* 在 此 时 旋转 了 10 圈 也 就 是 3600 度 ， 并 且 渐 变 放 大 1 倍 */ 
color:red; /* 颜 色 渐变 为 红色 */ 
} 
100%{ 
left:0; /* 恢 复 到 原来 位 置 ， 本 例 为 向 左 飞 */ 
} 
| 
</style> 
</head> 
<body> 


<br /><br /><br /><br /> 

<a href="" class="fly"> 飞 行 旋转 的 CSS3</a> 
</body> 

</html> 


【范例 11-1】 中 只 兼容 了 两 种 内 核 ， 其 他 浏览 器 需要 另行 增加 兼容 代码 。 从 代码 量 来 


说 ， 仅 次 于 使 用 jQuery 等 JavaScript 框架 实现 的 同等 效果 ， 现 阶段 ， 兼 容 问 题 仍 然 导致 很 多 
元 余 代码 ， 期 待 标准 化 早日 实现 。 


保存 【范例 11-1)】 为 html 格式 文件 ， 通 过 浏览 器 打开 它 后 ， 文 本 会 如 图 11-8 这 样 旋 


转 ， 且 左右 来 回 无 限 循环 滚动 下 去 。 
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图 11-8 transform 旋转 示意 


11.4 综合 应 用 一 一 3D 旋转 方块 


【范例 11-1】 只 运用 了 2D 的 变化 方法 ， 接 下 来 看 看 如 图 11-9 所 示 3D 效果 的 实现 ， 这 个 
实例 需要 用 到 CSS3 的 3D 转换 以 及 2D 转换 ， 并 上 且 要 用 到 动画 功能 ， 具 体 请 看 【范例 11-2】。 


rim Moss retex NE 
| 文件 日 ”第 统 ( 昌 查看 WV) 历史 (5) 书 笠 B) 工具 中 








图 11-9 CSS3 的 3D 旋转 方块 


【范例 11-2 CSS3 的 3D 旋转 方块 】 


让 <!DOCTYPE html> 

之 <html> 

3. <head> 

4. <meta charset="utf-8" /> 
5. <title>transform</title> 
6. <style> 

th body{margin:0} 

8 :CSS3d-box, 

Ey .CSS3d-box .outer, 


181 


0 
Te 
2 
35 
14. 
155 
Ls 
Ls 
TO 
9 
本 0 
2 
2 
3 
24. 
2 
26. 


六 
28. 
人 29 
30. 


Ss 
3 
3 
34. 
35, 
36。 


B37 
38 
395 
40. 
41。 
42. 
43 。 
44. 
45。 
46. 
47. 
48. 
49. 
50 . 
51. 
52. 
53. 
Sa. 


182 


.CSS3d-box .inner, 

.CSS3d-box .inner divi{ 
height:160px;width:160px;font-size:18px; 
text-align:center;line-height:160px; /* 让 文字 居中 的 效果 */ 

} 


:CSS3d-box { 
margin:0 auto; 
animation: fly 4s linear infinite; /*4 秒 钟 执行 完 一 次 动画 且 不 限 次 数 */ 
transform-style: preserve-3d; /* 让 对 象 转换 为 3D 模式 ，2D 模式 则 不 需要 */ 


1 
Qkeyframes fly{ 
0%{transform: rotateY (0);} 
100%{transform: rotateY (360deg);} /* 沿 Y 轴 水 平 线 旋 转 360 度 */ 
} 
.CSS3d-box .outer{ 
transform-style: preserve-3d; 
transform: rotateX(55deg) 
/* 让 对 象 整 体 沿 X 轴 旋转 ， 使 人 视觉 上 能 够 看 到 前 后 上 下 四 面 */ 
} 
.CSS3d-box .inner{ 
transform-style: preserve-3d; 
transform: rotateY (45deg); 
/* 让 对 象 整体 沿 Y 轴 旋转 ， 使 人 视觉 上 能 够 看 到 左右 两 个 面 */ 
Position: relative; 
} 
.CSS3d-box .inner div{ 
transform-style:preserve-3d;position:absolute; 
} 
/* 
下 面 每 一 个 面 根据 透视 原理 设置 旋转 角度 
其 中 
Y 轴 设 置 左右 两 个 面 
X 轴 设 置 上 下 两 个 面 
z 轴 设 置 前 后 两 个 面 
正光 
.CSS3d-box .Plane-1l { 
background:rgba(127,127,255,0.3) ;right:-80px;transform:rotateY (90deg); 
.CSS3d-box .plane-2 { 
background:rgba(127,255,127,0.3);left:-80px;transform: rotateY (90deg); 
' 
.CSS3d-box .plane-3 { 
background:rgba(127,255,255,0.3) ;transform:translatez (80px); 
. 
.CSS3d-box .plane-4 { 
background:rgba(0,255,255,0.3) ;transform:translateZz (-80px); 
} 
.CSS3d-box .plane-5 { 
background:rgba(0,255,127,0.3) ;transform: rotateX(-90deg) ;bottom:-80px; 


号 3 
6 
ST 
58. 
59. 
60. 
61s 
625 
63. 
64. 
655 
66. 
6 
68 . 
695 
TO0% 
Ms 
TT2% 
735 
74. 
了 5- 
了 6: 


} 


.CSS3d-box .plane-6 { 
background:rgba(127,127,127,0.3) ;transform:rotateX(-90deg) ;top:-80px; 


} 
</style> 
</head> 
<body> 


<br /><br /><br /><br /> 
<div class="CSS3d-box"> 
<div class="outer"> 
<div class="inner"> 


<div 
<div 
<div 
<div 
<div 
<div 
</div> 
</div> 
</div> 
</body> 
</html> 


class="plane-1"> 右 1 张 </div> 
class="plane-2"> 左 2 三 </div> 
class="plane-3"> 后 3 封 </div> 
class="plane-4"> 前 4 @</div> 
class="plane-5"> 下 5 前 </div> 
class="plane-6"> 上 6 端 </div> 


【范例 11-2】 为 每 一 个 面 增加 了 文字 ，plane-1 到 plane-6 分 别 对 应 右 左 后 前 下 上 6 个 
面 。 因 为 设计 的 是 正方 体 方块 ， 所 以 .CSS3d-box 、.CSS3d-box.outer 、.CSS3d-box .inner 
和 .CSS3d-box .inner div 的 边 长 尺寸 都 是 一 致 的 ， 即 160px。 从 中 心 点 推算 ， 每 一 个 面 都 要 向 
6 个 方向 位 移 80px。 
其 中 “transform-style:preserve-3d4” 控 制 对 象 能 够 在 3D 空间 中 显示 ， 而 且 也 是 关键 代 
码 ， 和 否则 一 切 立 体 效 果 都 是 无 效 的 。 


最 后 添加 动画 ， 用 animation 调用 @keyframes 定义 好 的 关键 帧 。 
360” 的 旋转 变化 就 能 够 让 方块 旋转 起 来 ， 通 过 animation 设置 4 秒 钟 完成 这 个 动作 ， 然 后 重 


复 下 去 。 
本 范例 在 Firefox 浏览 器 下 可 以 得 到 最 佳 体验 。 


11.5 相关 参考 


® https://www.w3.0rg/TR/2006/WD-CSS3-values-20060919/#deg 一 一 W3C 官方 


CSS3 属性 值 单 位 。 


® https://www.w3.org/TR/CSS3-transitions/ 一 一 W3C 官方 关于 transitions 的 说 明 。 
® http://chrome.360.cn/test/core/ 一 一 360 提供 了 一 个 检查 浏览 器 内 核 的 网 页 。 


关键 帧 只 做 了 一 个 
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第 12 章 一 个 可 以 离线 的 内 容 管理 系统 


计算 的 目的 不 在 于 数据 ， 而 在 于 洞察 事务 。 
一 一 理 查 德 。 哈 明 


在 第 7 章 介 绍 过 HTML5 的 各 种 新 特性 ， 而 离线 应 用 就 是 其 中 重要 的 部 分 ， 它 是 对 增强 
用 户 体验 和 完善 相关 旧 技术 不 足 的 改良 ， 本 章 通过 一 个 实例 来 了 解 相关 内 容 。 
本 章 主要 知识 点 : 


® LocalStorage 和 SessionStorage 
® IndexedDB 
e manifest file 文件 清单 


12.1 功能 设计 


这 里 的 离线 是 相对 于 网 络 的 在 线 而 言 的 ， 通 常 是 指 电脑 无 法 连接 到 互联 网 ， 比 如 网 线 不 
同 、 没 有 Wf 信和 号、 无 上 网 权限 等 。 

内 容 管理 系统 即 CMS (Content Management System) ， 互 联网 上 有 用 不 同 编程 语言 开发 
的 各 种 各 样 不 同 用 途 的 CMS， 如 一 些 门户 网 站 的 新 闻 文章 CMS、 下 载 网 站 的 CMS、 视 频 网 
站 的 CMS、 图片 展示 的 CMS 等 。 网 站 上 常见 的 那些 Blog 系统 从 某 种 角度 上 看 ， 也 可 以 算是 
CMS， 只 是 因为 它 名 气 和 特征 独特 而 单独 称 之 为 Blog 系统 。 

本 书 定义 的 内 容 管理 系统 是 用 来 增加 、 编 辑 、 删 除 、 搜 索 网 站 文本 内 容 的 简单 系统 ， 主 
要 用 以 说 明 其 基本 核心 ， 且 大 多 CMS (内 容 管 理 系统 ) 的 基本 功能 亦 是 如 此 。 有 具体 如 下 : 


@ 离线 使 用 ， 即 内 容 管理 系统 在 脱 机 状态 下 也 能 使 用 下 面 设计 的 这 些 功能 。 

@ 添加 信息 ， 将 文章 标题 、 文 章 内 容 添 加 到 应 用 中 并 提示 ， 且 以 当前 时 间 为 文章 的 发 布 
时 间 ， 修 改 时 间 也 就 是 发 布 时 间 。 

e@ 更 新 信息 ， 对 于 有 些 文章 因为 输入 错误 或 其 他 原因 需要 修改 内 容 的 ， 可 以 对 其 修改 ， 
并 且 将 修改 时 间 更 新 为 当前 时 间 。 

e@ 列表 信息 ， 将 最 新 的 文章 列 出 来 ， 对 于 当天 的 文章 加 上 一 个 new 标记 。 


。 搜索 信息 ， 通 过 关键 字 搜 索 文章 标题 ， 快 速 找到 自己 想 要 的 文章 信息 并 列 出 来. 
。 删除 信息 ， 对 于 一 些 错误 的 文章 信息 ， 能 够 给 予 删 除 并 提示 . 


本 书 列举 只 是 抛砖引玉 ， 读 者 还 可 以 通过 在 线 状 态 检 测 ， 完 成 将 数据 发 布 到 服务 器 的 步 
又， 因为 涉及 一 些 不 在 本 书 探讨 范围 之 内 的 服务 端 技术 ， 故 在 此 不 做 详 述 。 


通过 navigator onLine 可 以 检测 设备 是 在 线 还 是 离线 ， 更 难得 的 是 IE 6 也 支持 此 属性 ， 
EC 支持 相关 事件 没有 支持 ， 其 他 标准 浏览 器 均 已 支持 。 


12.2 Web 储存 和 应 用 缓存 


Web Storage 即 Web 存储 ， 又 称 为 DOM 存储 ，Web 存储 从 某 种 意义 上 理解 也 可 以 算 作 
HTML5 本 地 存储 。 应 用 缓存 是 指 Web 应 用 程序 缓存 ， 其 主要 目的 是 让 Web 应 用 在 离线 状态 
下 也 能 够 运行 。 


12.2.1 本 地 存储 (LocalStorage) 


Web Storage 又 分 为 LocalStorage 和 SessionStorage， 是 最 早 给 予 支持 的 本 地 存储 之 一 。 从 
表 12-1 可 知 ， 早 在 IE 8 就 给 予 其 支持 了 。 


表 12-1 各 浏览 器 对 Web Storage 最 早 开始 支持 的 版 本 


LocalStorage 





Web 存储 有 几 大 优点 : 
第 一 ，LocalStorage 存储 除非 主动 删除 数据 ， 和 否则 数据 是 永远 不 会 过 期 的 。 
第 二 ， 其 存储 空间 更 大 , 在 IE8 下 每 个 独立 的 存储 全 间 为 10MB， 其 他 浏览 器 实现 略 有 
不 同 ， 但 都 要 比 Cookie 大 很 多 。 更 重要 的 是 ， 存 储 数据 不 会 发 送 到 服务 器 。 而 设置 的 
Cookie， 其 内 容 会 随 着 请 求 被 一 并 发 送 到 服务 器 ， 这 对 于 本 地 存储 的 数据 是 一 种 带宽 浪费 。 
而 Web Storage 中 的 数据 则 仅仅 存在 本 地 ， 不 会 与 服务 器 发 生 任何 交互 。 
更 多 丰富 易 用 的 接口 使 得 数据 操作 更 为 简便 ， 参 见 表 12-2。 
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表 12-2 Web Storage 常见 属性 和 方法 




















属性 /方法 说 明 

length 属性 ， 返 回 现在 已 经 存储 的 变量 数目 

key(n) 返回 第 n 个 变量 的 键 值 key 

gethem(l) 
setltem(k , v) 和 localStorage.k =v 一 样 ， 设 置 键 值 k 的 变量 值 

removeltem(k) 和 delete localStorage.k 一 样 ， 删 除 键 值 为 k 的 变量 

clear() 清空 所 有 变量 








通过 下 面 的 代码 可 统计 某 台电 脑 最 早 访问 网 页 的 时 间 和 总 共 访问 的 次 数 ; 


<script> 
// 如 果 k 一 sitecount 存在 则 表示 曾经 访问 过 本 网 页 


if(localStorage.siteCount)f{ 


localStorage.siteCount++; // 计 数 +1 
}elsef{ 
localStorage.visitTime = new Date(); // 第 一 次 访问 记录 日 期 
localStorage.siteCount = 1; / /初始化 计数 器 
} 
</script> 


12.2.2 会 话 存储 (SessionStorage) 


SessionStorage 和 LocalStorage 极其 相似 ， 就 连 API 也 是 相同 的 ， 唯 一 不 同 的 是 
SessionStorage 的 数据 只 存在 于 一 个 session 会 话 里 ， 当 关 掉 窗口 或 者 标签 时 会 立刻 丢掉 这 些 
数据 ， 而 LocalStorage 对 应 的 数据 则 可 以 长 久保 存 ， 直 到 被 人 为 地 修改 或 者 删除 。 

SessionStorage 与 页 面 JavaScript 对 象 有 些 区 别 ， 页 面 中 一 般 的 JavaScript 对 象 或 数据 的 
生存 期 是 仅 在 当前 页 面 有 效 ， 因 此 刷新 页 面 或 转 到 另 一 页 面 ， 数 据 就 不 存在 了 。 

而 SessionStorage 只 要 在 同 源 的 同窗 口中 ， 刷 新 页 面 或 进入 同 源 的 不 同 页 面 ， 数 据 始终 
存在 。 也 就 是 说 ， 只 要 这 个 浏览 器 窗口 没有 关闭 ， 加 载 新 页 面 或 重新 加 载 ， 数 据 仍然 存在 。 


12.2.3 应 用 程序 缓存 


在 没有 应 用 程序 缓存 技术 之 前 ， 如 果 要 控制 浏览 器 是 否 应 该 缓存 某 个 文件 ， 需 要 在 程序 
里 用 Expires 属性 设置 过 期 时 间 来 控制 ， 而 那些 静态 文件 则 需要 到 Web 服务 器 中 去 设置 过 期 
时 间 。 就 算 如 此 ， 也 不 能 有 效 控制 具体 某 一 个 文件 的 缓存 与 否 。 
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HTML5 引入 了 应 用 程序 缓存 ， 微 软 称 之 为 AppCache， 这 意味 着 Web 应 用 可 进行 缓存 ， 
并 可 在 没有 互联 网 连接 时 进行 访问 。 

应 用 程序 缓存 为 应 用 带 来 3 个 优势 : 

e 离线 浏览 : 用 户 可 在 应 用 离线 时 使 用 它们 。 

日 速度 : 已 缓存 资源 加 载 得 更 快 。 

日 减少 服务 器 负载 : 浏览 器 将 只 从 服务 器 下 载 更 新 过 或 更 改过 的 资源 。 


要 使 用 应 用 程序 缓存 ， 一 般 都 需要 配置 Web 服务 器 的 MIME-type。 


12.2.4 搭建 支持 应 用 缓存 的 服务 器 


不 同 服务 器 设置 MIME-type 的 步骤 略 有 不 同 ， 图 12-1 是 Windows 中 的 Nginx 1.5.1 以 上 
版 本 的 设置 ， 早 期 版 本 可 能 没有 mime.types 文件 ， 需 要 读者 去 *.conf 文件 里 仔细 查找 一 下 。 








EECOEOECOErOCTTT 
Eee YOU WH 2 如 


到” dd OnE PI ENN 
地 直人 Oc \rous om et IO | > =- 一- 





回 wip 回 wp 


wat 





EST 
图 12-1 Windows 版 本 Nginx 设置 MIME-type 


mT 


在 Apache 的 安装 目录 下 也 有 类 似 Nginx 这 样 的 conf/mime.types 文档 ， 在 相应 的 地 方 
增加 一 行 “text/cache-manifest manifest”， 前 面 是 MIME-type， 然 后 空格 ， 后 面 是 文件 
后 级 。 

微软 的 IIS 现在 市 面 上 有 多 个 版 本 ， 图 12-2 是 以 Windows 2003 系统 下 的 IIS 6.0 设置 的 
示意 图 。 打 开 IIS 信息 服务 器 管理 器 ， 可 右 击 “本 地 计算 机 ”选择 “属性 ”， 再 单 击 选择 
“MIME 类 型 ”， 再 单 击 “ 新 建 N)” 即 可 增加 自 定义 MIME-type。 
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12-2 IIS 6 设置 MIME-type 


设置 MIME-type 之 后 ， 大 部 分 浏览 器 就 能 识别 这 种 类 型 的 文件 ， 不 会 把 它 当 作 未 知 文件 
用 下 载 询问 保存 的 方式 处 理 。 接 下 来 看 看 manifest file 文件 清单 的 内 容 。 


12.2.5 神奇 的 manifest file 文件 清 


当 网 页 引用 了 manifest file 文件 清音 时， 浏览 器 就 会 如 图 12-3 所 示 提 示 用 户 是 否 允 许 脱 
机 使 用 ， 对 于 部 分 版 本 的 浏览 器 可 能 无 此 提示 ， 但 是 可 以 在 某 些 菜单 中 找到 ， 例 如 Firefox 在 
选项 菜单 中 可 见 〈 如 图 12-4 所 示 ) 。 以 前 ，Web 应 用 程序 是 否 脱 机 是 由 客户 端 决定 的 ， 而 现 
在 可 以 由 开发 者 决定 ， 这 意味 着 开发 者 有 更 多 的 发 挥 空间 。 


) 应 用 程序 狠 存 
文件 中 ”编辑 E) 查看 WD) 历史 GG) 书签 妃 工具 中 帮助 人 D 
| 站 应用 程序 级 存 El 


€ 0 Bo OH cg-aP ml Hl- Wl- 


CE 此 网 站 《 127.0.0.1) 提供 了 保存 至 您 计算 机 以 供 下 机 写作。 >” 
@ 合用 的 洲 据 。 


ET 





图 12-3 浏览 器 对 启用 应 用 程序 缓存 的 网 站 进行 询问 
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mm 回 
日 扯 雷 转 包 名 人 区 


轨 规 。 标 符 页 。 内 容 。 应 用 得 序 安全 。 同步 





利夫 | 反 傅 网络 | 更 新 | 证书 




















连接 
配置 Firefox 如 何 连 接 至 国际 互联 网 设 秆 昌 -… 
「 网 阁 内 容 妆 存 - 
mo | 
厂 无 视 局 动 插 存 管理 (O) 
存 晤 大 为 350- = 
敲 轿 Web 内 容 和 用 广 数 据 
立即 清除 (N) 
也 网 站 请 求 保存 数据 供 访 线 使 用 时 通知 我 0 例外 CQ0… 
以 下 网 站 被 多 许 存储 供 嘉 线 使 用 的 数据 : 
es 二 
wm | wa 





图 12-4 离线 网 站 列表 
那么 如 何 启用 应 用 程序 缓存 呢 ? 在 文档 的 <html> 标签 中 包含 manifest 属性 即 可 : 


<!DOCTYPE HTML> 
<html manifest="12.manifest"> 


re 

文件 12.manifest 的 路 径 是 可 访问 路 径 ， 文 件 后 级 是 前 面 服务 器 配置 中 定义 的 后 
级 .manifest， 文 件 是 简单 的 文本 文件 ， 它 告知 浏览 器 被 缓存 的 内 容 ( 以 及 不 缓存 的 内 容 )。 
文件 可 分 为 3 部 分 。 

e。 CACHE MANIFEST: 在 此 标题 下 列 出 的 文件 将 在 首次 下 载 后 进行 缓存 。 

e NETWORK: 在 此 标题 下 列 出 的 文件 需要 与 服务 器 连接 ， 且 不 会 被 缓存 。 

e@ FALLBACK: 在 此 标题 下 列 出 的 文件 规定 当 页 面 无 法 访问 时 的 回 退 页 面 (比如 404 

页 面 ) 。 


比如 ， 下 面 这 个 例子 中 第 一 行 的 CACHE MANIFEST 是 必需 的 : 


CACHE MANIFEST 

#2014-02-21 v1.0 

/style.css 
/logo.gif 

We 


上 面 的 manifest 文件 列 出 了 3 个 资源 : 一 个 CSS 文件 ， 一 个 GIF 图 像 ， 以 及 一 个 
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JavaScript 文件 。 当 manifest 文件 加 载 后 ， 浏 览 器 会 从 网 站 的 根 目 录 下 载 这 3 个 文件 。 然 后 ， 
无 论 用 户 何 时 与 因特网 断 开 连接 ， 这 些 资 源 依然 是 可 用 的 。 

以 “#” 开 头 的 是 注释 行 ， 但 也 可 满足 其 他 用 途 。 应 用 的 缓存 会 在 其 manifest 文件 更 改 时 
被 更 新 。 如 果 你 编辑 了 一 幅 图 片 或 者 修改 了 一 个 JavaScript 函数 ， 那 么 这 些 改 变 都 不 会 被 重 
新 缓存 。 更 新 注释 行 信息 是 一 种 使 浏览 器 重新 缓存 文件 的 办 法 。 

简单 来 说 ， 应 用 程序 缓存 需要 注意 如 下 几 点 : 
必须 使 用 8 位 Unicode 转换 格式 (UTF-8) 字符 编码 
必须 接受 文本 /缓存 清单 MIME 类 型 
必须 以 CACHE MANIFEST 行 开始 
可 以 包含 注释 ,但 前 面 必须 加 标记 “#” 


虽然 通过 manifest 文件 可 以 指定 很 多 类 型 的 缓存 文件 ， 但 是 也 不 能 随意 指定 诸如 视频 或 
高 清 大 图 片 等 内 容 。 


12.3 HTML5 本 地 存储 


本 地 存储 就 是 把 数据 存放 在 客户 端 ， 也 称 为 本 地 持久 化 。 

早期 的 纯 HTML 网 页 是 不 能 在 客户 端 存储 任何 数据 的 ， 有 人 可 能 问 ， 那 么 缓存 文件 算 不 
算是 本 地 存储 呢 ? 当然 不 算 ， 那 些 缓存 文件 仅仅 是 为 了 让 网 页 加 载 速度 更 快 而 设计 的 。 

本 地 存储 是 为 了 能 够 在 客户 端 保存 有 用 数据 而 产生 的 设计 ， 目 的 完全 不 同 。 早 期 的 
Cookie 可 以 存储 很 少 一 部 分 数据 ， 是 最 早期 的 本 地 存储 。 由 于 Cookie 存储 容量 小 ， 后 来 
Flash 给 予 扩展 使 得 应 用 更 为 广泛 ， 但 是 Flash 是 插件 形式 ， 有 很 多 的 制约 ， 尤 其 是 移动 设备 
对 Flash 的 支持 不 是 很 好 ， 所 以 对 HTML5 本 地 存储 规范 的 需求 就 变 得 非常 迫切 。 

Web SQL Database 本 地 数据 库 是 一 个 很 有 创意 的 想法 ， 给 了 大 家 很 多 扩展 空间 。 不 过 
W3C 有 文档 提示 说 已 停止 维护 ， 让 人 不 免 觉得 遗憾 。 虽 然 不 能 进入 W3C 的 规范 ， 但 是 鉴于 
除了 正 和 Firefox 之 外 ， 其 他 浏览 器 都 已 经 实现 了 Web SQL Database， 并 且 它 还 具有 一 些 
HTMLS Storage 所 不 具有 的 特性 ， 所 以 还 是 值得 了 解 一 下 的 。 

在 Firefox 的 坚持 下 ， 最 后 大 家 都 统一 支持 了 Web IndexedDB 接口 ， 即 W3C 推荐 支持 的 
本 地 存储 方案 。 


12.3.1 Web IndexedDB 

IndexedDB 也 可 以 称 为 索引 数据 库 API， 作 为 HTMLS5 的 一 部 分 ， 对 创建 具有 丰富 本 地 存 
储 数据 的 数据 密集 型 的 离线 HTML5 Web 应 用 程序 很 有 用 。 同 时 ， 它 还 有 助 于 本 地 缓存 数 
据 ， 使 传统 在 线 Web 应 用 程序 (如 移动 Web 应 用 程序 ) 能 够 更 快 地 运行 和 响应 。 
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相对 于 Web Storage 来 说 ， 对 IndexedDB 的 支持 要 晚 一 些 ， 如 表 12-3 所 示 。 而 一 个 网 站 
可 以 有 一 个 或 多 个 ndexedDB 数据 库 ， 每 个 数据 库 必 须 具 有 唯一 的 名 称 。 


表 12-3 各 浏览 器 对 IndexedDB 最 早 开始 支持 的 版 本 





IE Safari Firefox Opera Chrome Android Browser 





IndexedDB 10 xX 16 15 24 xX 





索引 数据 库 API 有 一 些 常见 的 概念 : 


ObjectStore ( 对象 存储 ) 用 于 存储 数据 ， 对 象 存储 是 其 属性 包含 单个 值 的 JavaScript 
对 象 的 集合 。 

KeyPath ( 键 值 ) 对 象 存储 中 的 每 个 JavaScript 对 象 (有 时 称 为 record ) 都 有 一 个 键 
值 。 键 值 用 于 唯一 标识 对 象 存储 中 的 单个 记录 。 

Index (索引 ) 根据 某 一 通用 属性 的 值 来 组 织 对 象 。 索 引 将 返回 一 组 键 值 ， 可 用 于 从 
原始 对 象 存储 中 获取 单个 记录 。 

Cursor ( 指针 ) 表示 一 组 值 。 当 索引 定义 指针 时 ， 指 针 表 示 索 引 返 回 的 一 组 键 值 。 当 
对 象 存储 定义 指针 时 ， 指 针 表 示 存 储 在 指针 中 的 一 组 记录 。 

KeyRange ( 键 范围 ) 为 一 个 索引 或 对 象 存储 中 的 一 组 记录 定义 值 的 范围 ; 键 范围 可 
让 你 筛选 指针 结果 。 

Database (数据库 ) 包含 对 象 存 储 和 索引 ; 数据 库 对 象 还 可 管理 事务 。 


@ Request ( 请求) 表示 针对 数据 库 中 的 对 象 所 采取 的 单个 操作 。 例 如 ， 打 开 数 据 库 会 


引发 一 个 请 求 对 象 ， 可 以 为 这 个 请 求 对 象 定义 事件 处 理 程序 来 响应 请 求 的 结果 。 
Transaction (事务 ) 管理 操作 的 上 下 文 ， 以 及 维护 数据 库 活动 的 完整 性 。 例 如， 只 能 
在 版 本 更 改 事务 的 上 下 文中 创建 对 象 存储 。 如 果 事 务 被 中 止 ， 则 该 事务 中 的 所 有 操作 
都 会 被 取消 。 


其 中 ObjectStore 有 些 类 似 关系 型 数据 库 中 表 的 概念 ， 只 是 在 IndexedDB 中 没有 所 谓 字段 
的 概念 ， 因 为 每 一 个 对 象 存 储 可 以 直接 存储 JavaScript 对 象 。 

在 IndexedDB 中 ， 操 作 比较 简单 ， 只 有 几 个 方法 〈 如 表 12-4 所 示 ) ， 但 是 几乎 所 有 的 操 
作 都 采用 了 command -> request -> result 的 方式 。 比 如 ， 查 询 一 条 记录 ， 返 回 一 个 request， 在 
request 的 result 中 得 到 查询 结果 。 又 比如 打开 数据 库 ， 返 回 一 个 request， 在 request 的 result 
中 得 到 返回 的 数据 库 引 用 。 








表 12-4 indexedDB API 的 IDBFactory 对 象 提供 的 常见 方法 





方法 


说 明 





open(name[,version]) | 必需 ,水平 阴 影 的 位 置 ， 允 许 负 值 





cmp(keyLkey2) | 接受 两 个 参数 ， 比 较 两 个 Key 值 ， 看 一 个 是 否 大 于 另 一 个 








deleteDatabase(name) | 删除 数据 库 
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其 中 cmp() 方 法 是 一 个 与 数据 库 操 作 无 关 的 工具 方法 ， 在 任何 地 方 都 可 以 使 用 ， 且 无 须 
实例 化 。 用 open0 方 法 打开 数据 库 : 
Var cmd = window.indexedDB; 
var req = cmd.open ("mydb"); 
var db = null; 
req.onsuccess=function(e){ 
db = e.target.result; 
//or 
db = req.result; 
hi 
上 面 的 代码 打开 一 个 数据 库 mydb， 在 成 功 事件 中 获得 数据 库 连 接 db。 这 和 传统 意义 上 
的 数据 库 连 接 有 很 大 的 不 同 ， 但 是 它 符 合 JavaScript“ 异 步 ” 和 “事件 驱动 ”的 特点 。 连 接 上 
数据 库 之 后 就 可 以 得 到 IDBDatabase 对 象 ( 如 表 12-5 所 示 ) 。 


表 12-5 IDBDatabase 对 象 的 方法 及 其 说 明 
方法 
createObjectStore(namel[, {keyPath,autoIncrement}]) 
deleicObiectS iorelram) 
tonsaction(otoreNames, mode) 
cowed 


IDBDatabase 对 象 中 的 transaction() 方 法 会 返回 一 个 IDBTransaction 对 象 (如 表 12-6 所 
示 ) ， 而 其 他 方法 则 返回 本 身 。transaction 的 mode 有 3 种 。 


e IDBTransaction.READ_ONLY: 只 读 。 
e IDBTransaction.READ_WRITE: 可 读 可 写 。 
e IDBTransaction.VERSION_CHANGE: 版 本 升级 。 








表 12-6 IDBTransaction 对 象 方法 及 其 说 明 











objectStore(name) 从 当前 事务 中 取得 对 象 储存 
abort() 中 断 当前 事务 








常用 的 是 前 两 种 ， 如 果 不 设置 事务 级 别 ， 则 默认 为 READ ONLY 。 通 过 事务 对 象 的 
objectStore() 方 法 才 可 以 获取 对 象 存储 (也 就 是 传统 理解 的 “ 表 ”) IDBObjectStore 对 象 ( 如 
表 12-7 所 示 ) 。 
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表 12-7 IDBObjectStore 对 象 方法 及 其 说 明 























方法 说 明 

add 添加 一 个 记录 对 象 到 对 象 存储 

clear 删除 对 象 存储 的 所 有 数据 

count 返回 的 记录 数 

createIndex 创建 一 个 索引 

deleteIndex, 从 对 象 存储 中 删除 索引 

delete 从 对 象 存储 中 删除 一 个 记录 
| get 从 对 象 存储 取得 一 个 记录 

index 检索 与 对 象 存储 相关 联 的 索引 

openCursor 返回 一 个 游标 对 象 














蔡 换 或 添加 一 条 记录 


IDBObjectStore 对 象 是 最 常用 的 对 象 ， 其 中 add、delete、put、get 方 法 几乎 能 够 分 别 对 应 
传统 意义 上 的 增 、 删 、 改 、 查 ， 完 成 日 常 项 目 中 的 大 部 分 操作 。 


12.3.2 Web SQL Database 

Web SQL Database 因 SQL 变 得 方便 ， 也 因 SQL 成 为 被 废弃 的 原因 之 一 。 虽 然 平 时 常常 
说 SQL， 但 实际 使 用 的 是 MS SQL、Oracle SQL、MySQL SQL、postgre SQL 或 者 SQLite 
SQL (尽管 有 一 个 叫 作 SQL-92 的 规范 ， 但 它 基 本 形同虚设 ) ， 严 格 地 说 ， 甚 至 都 不 存在 
SQLite SQL， 使 用 的 实际 上 是 SQLite x.y.z SQL， 因 为 每 个 软件 或 同一 个 软件 的 不 同 版 本 所 提 
供 的 支持 力度 都 不 尽 相同 ， 而 这 也 就 是 Web SQL Database 最 大 的 问题 ， 它 无 法 统一 各 个 浏览 
器 厂商 实现 的 SQL 语言 。 如 果 你 的 某 条 Web SQL 查询 只 能 在 Chrome 上 运行 ， 这 还 能 叫 作 标 
准 吗 ? 

在 W3C 的 Web SQL Database 规范 中 有 这 样 的 描述 : Web SQL Database 引入 了 一 套 使 用 
SQL 来 操纵 客户 端 数据 库 的 API， 这 些 API 是 异步 的 (asynchronous) ， 所 以 开发 者 在 使 用 
这 套 API 时 会 发 现 匿 名 函数 非常 有 用 。 规 范 中 所 使 用 的 SQL 语言 为 SQLite 3.6.19。 

其 中 SQLite 是 一 款 轻型 的 数据 库 ， 是 遵循 ACID 的 关系 型 数据 库 管 理 系 统 。 它 的 设计 目 
标 是 嵌入 式 的 ， 它 占用 资源 非常 低 ， 只 需要 几 百 千 字 节 的 内 存 。 它 能 够 支持 Windows、 
Linux、UNIX 等 主流 操作 系统 ， 同 时 能 够 跟 很 多 程序 语言 相 结 合 ， 如 C#、PHP、Java、 
JavaScript 等 ， 还 有 ODBC 接口 ， 比 起 MySQL、PostgreSQL 这 两 款 开源 的 数据 库 管理 系统 ， 
它 的 低 并 发 处 理 速度 更 快 ， 号 称 是 世界 上 使 用 最 广泛 的 关系 型 数据 库 ， 因 为 在 每 个 浏览 器 、 
操作 系统 、 移 动 设 备 、 典 入 式 系统 中 都 能 找到 它 的 身影 。 

下 面 是 Web SQL Database 规范 中 定义 的 3 个 核心 方法 。 

@ openDatabase: 这 个 方法 使 用 现 有 数据 库 或 新 建 数 据 库 来 创建 数据 库 对 象 。 

e@ transaction: 这 个 方法 允许 我 们 根据 情况 控制 事务 提交 或 回 滚 。 

个 方法 用 于 执行 真实 的 SQL 查询 。 





这 
®@ executeSql: 这 
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Web SQL Database 就 是 一 个 可 以 在 Web 上 直接 使 用 的 SQL 数据 库 ， 我 们 要 做 的 就 是 打 
开 数 据 库 ， 然 后 执行 SQL， 和 对 MySQL 做 的 事情 没什么 两 样 。 


var db = window.openDatabase("UserDB"，"1.0"， "数据 库 描 述 ",20000) ; 
if(db){ 
console.1og ("新 建 数 据 库 成 功 ! "); 
// 创 建 数 据 表 
db.transaction(function(tx) { 
tx.executeSql ("CREATE TABLE test (id int UNIQUE, username TEXT, 
timestamp REAL)"); 





Ey 
// 向 表 中 插入 数据 
db.transaction(function(tx) { 
tx.executeSql ("INSERT INTO test (username, timestamp) values 
(2,2)", ["2Z23F", new Date() .getTime()], null, null); 
Fy 
// 查 询 数据 
db.transaction (function (tx) { 
tx.executeSql ("SELECT * FROM test", [], 
function(tx, result) { 
for(var i = 0; i < result.rows.length; i++){ 
console.log(result.rows.item(i)['username']) 


}, function(){ 
console.log("error"); 
Ds; 
]) 7 


上 面 的 代码 打开 一 个 数据 库 连 接 ， 如 果 没 有 则 创建 ， 用 executeSql 函数 执行 SQL 语句 ， 
创建 一 个 test 表 ， 并 向 其 中 插入 一 条 数据 ， 最 后 将 查询 显示 到 控制 台 ， 效 果 如 图 12-5 所 示 。 








Network Sources Tineline Profiles Audits | Console | © 








e("User0B"， "1.9"， "考据 库 指 ; 





tx) { 
REATE TABLE test (id int UNIQUE, usernane TEXT, tinestanp REAL)®)S; 


) values(?, 3)*, ["Z3F*, new Date().getTine()], null, nul1); 


他 成 功 ! 
undertne 
zr 

， 





,Y= QA © <topframe> 下 <page context> T ED |Erors Warnings Logs Debug e717 将 


12-5 Web SQL Database 在 Chrome 下 的 运行 效果 
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12.4 编写 内 容 管理 系统 


通过 前 面 介绍 ， 本 节 用 代码 来 说 明 在 内 容 管理 系统 中 如 何 实现 离线 可 用 ， 以 及 数据 的 
增 、 删 、 改 、 查 功能 。 


12.4.1 可 离线 的 HTML、JS 和 CSS 
前 面 已 学 习 过 ， 笔 者 在 这 直接 给 出 相关 代码 ， 详 情 见 【范例 12-1】。 
【范例 12-1 离线 内 容 管理 系统 HTML 和 CSS 结构 】 


<!doctype htm1> 
<html manifest="12.manifest"> 
<head> 
<meta charset="UTF-8" /> 
<title> 简 易 内 容 管理 系统 </title> 
<style> 
body{ margin: 0;padding: 0;background: #454545;} 
.nav{background:#282828; height:30px; padding: 20px 30px;} 
.nav button{border:0; height: 30px; width:100px; background: #00bcf2; 
font-size: 14px; font-weight: bold; color:#fff; margin-right: 10px;} 
ES .box{padding: 20px 30px;} 
13。 .box input, 
2 #key{border:0; height: 30px; width:600px;background: #dadada;} 
3° .box textarea{border:0;background: #dadada; height:200px; width:600px;} 
14。 .box button{border:0; height: 30px; width:100px; background: #282828; 
font-size: 14px; font-weight: bold; color:#00bcf2; margin-right: 10px;} 
i #1ist ul{width:600px;} 
6 #1ist 1i{ color: #00bcf2; height:50px; line-height: 50px; border-bottom: 
lpx dashed #00bcf2;} 


oaouwmn 必 wmwN PP 





Ts #key{width:60px;} 

Le </style> 

9 <script src="jquery.min.js"></script> 
20. </head> 

21. <body> 

2 <script> 

0 

24. </script> 

了 3 <div id="content"></div> 

26. <div class="nav"> 

和 <button id="add"> 添 加 </button> <input id="key" /> <button id="search"> 搜 


索 </button> 
28s </div> 
29% <div class="box"> 
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305 
315 
32- 
33% 
34. 
3 
365 
375 
38。 
9 


<input id="title"/><br /><br /> 
<textarea id="info"></textarea><br /><br /> 
<button id="save" data-type="0"> 保 存 </button> 
</div> 
<div id="list"> 
<ul> 
</ul> 
</div> 
</body> 
</html> 


为 了 直观 说 明 ，CSS 代码 没有 分 离 ， 不 建议 这 样 做 ， 已 投产 的 项 目 还 是 应 该 独立 出 来 。 


其 中 控制 离线 缓存 的 文件 代码 如 下 : 


CACHE MANIFEST 
jquery.min.js 


12.4.2 添加 数据 


在 添加 数据 之 前 需要 先 链接 数据 库 ， 由 于 是 客户 端 ， 必 然 会 有 很 多 不 同 的 用 户 ， 所 以 还 


需要 判断 客户 端 是 否 存在 数据 库 ， 如 果 不 存在 还 需要 创建 ， 请 看 下 面 的 代码 : 
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Var data={}; // 设 置 一 个 操作 命名 空间 
data.dbName = 'cms'; 
data.tbName = 'article'; 


data.conn=function(callback){ 
var rs = this,openDB; 
ifl(rs.result) {callback (rs.result) ;return;} 
// 如 果 已 经 连接 成 功 ， 则 直接 返回 
rs.db = window.indexedDB || window.webkitIndexedDB || 
window.mozIndexedDB || window.msIndexedDB; 
openDB = rs.db.open(rs.dbName); 
// 无 数据 库 表 则 创建 
openDB .onupgradeneeded = function(e){ 
Var rsDB = e.target.result; 
if(!rsDB.objectStoreNames.contains (rs.tbName)){ 
consoleg&console.log("create objectStore (as table)"); 
// 设 置 自动 编号 
Var oStore = rsDB.createObjectStore (rs.tbName, 
{keyPath: "id", autoIncrement:true }); 
oStore.createIndex ("idx title","title", 
{unique:false}); / /创建 索引 ， 利 于 搜索 
1 
}; 
// 打 开 成 功 ， 则 执行 相关 操作 
openDB .onsuccess = function(e){ 
var rsDB = e.target.result; // 所 有 操作 结果 均 以 此 形式 返回 


rs.result = rsDB; 


callback (rsDB); 
} 
I 


由 于 所 有 操作 都 需要 链接 ， 因 此 将 data.conn() 方 法 作为 基础 方法 来 完成 其 他 数据 操作 ， 
对 添加 数据 方法 的 设计 如 下 : 


data.add = function(obj){ 

var rs = this; 

rs.conn(function(result){ 
var tr = 


// 指 向 data 对 象 
// 通 过 回调 来 完成 相应 操作 
var oStore = 


result.transaction([rs.tbName],"readwrite"); 


tr.objectStore (rs.tbName); 
oStore.add (obj); 

A 
1 


这 只 是 数据 底层 的 操作 ，data.add(obj) 接 受 一 个 JSON 对 象 ， 也 就 是 说 在 交互 操作 ( 单 击 
保存 ) 时 ， 将 相应 数据 组 织 成 一 个 对 象 。 


12.4.3 列表 和 查询 数据 


列表 数据 和 查询 数据 比较 接近 ， 都 需要 用 到 游标 ， 先 看 列表 数据 的 操作 代码 : 
data.list 


= function(callback) { 


var rs this; 


rs.conn(function(result){ 
Var tr = result.transaction([rs.tbName],"readonly"); 
var oStore = 


tr.objectStore (rs.tbName); 
oStore .openCursor () .onsuccess 


function(e){ 
Var rsDL = e.target.result; 


if(rsDL) { // 无 结果 时 为 undefined 
callback (rsDL.value); 


rsDL.continue () ;// 继 续 到 下 一 条 记录 
| 
] 7 
]) 7 
| 


查询 数据 的 时 候 还 要 接受 一 个 关键 字 参 数 ， 一 般 都 需要 对 文章 标题 进行 查询 ， 所 以 这 里 
多 了 一 些 匹 配 操作 ， 详 见 代 码 : 


data.search = function(key,callback){ 
var rs = this; 


rs.conn(function(result){ 


Var tr = result.transaction([rs.tbName],"readonly"); 
Var oStore = tr.objectStorel(rs.tbName); 
oStore = oStore.index("idx title"); 


// 获 取 索 引 对 象 存储 集合 
oStore.openCursor () .onsuccess 


function(e){ 
Var rsDL = e.target.result; 
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if(rsDL){ // 无 结果 时 为 undefined 
if (key){ // 如 果 有 关键 字 则 用 正则 匹配 
if(new RegExP (key) .test (rsDL.key)) 
callback (rsDL.value); 
}else{ 


callback (rsDL.value); 
} 


rsDL.continue (); 


上 
Ds; 
] 7 


投产 项 目 还 可 以 对 此 做 进一步 的 性 能 优化 ， 还 请 注意 。 


12.4.4 更 新 数据 


在 更 新 数据 时 ， 一 般 都 需要 把 旧 数 据 读 取出 来 ， 然 后 修改 ， 再 保存 ， 所 以 这 里 需要 准备 
两 个 方法 : 一 个 是 获取 数据 的 方法 ， 一 个 是 更 新 数据 的 方法 。 
获取 数据 的 方法 ， 这 里 使 用 主键 id 值 ， 在 传递 数据 时 尤其 要 注意 数字 12 和 字符 串 
“12” 在 JavaScript 中 的 差异 ， 否 则 获取 不 到 相应 的 数据 ， 代 码 如 下 : 
data.get = function(id,callback){ 
var rs = this; 
rs.conn(function(result){ 


Var tr = result.transaction([rs.tbName],"readwrite"); 
Var oStore = tr.objectStore (rs.tbName); 
oStore.get (id) .onsuccess = function(event) { 
callback (event .target .result); 
}; 
1D); 
] 7 


编辑 数据 的 时 候 比较 特殊 ， 没 有 传统 SQL 那 种 “where id=” 方 式 ， 而 是 需要 把 主键 值 id 
包含 在 需要 更 新 的 JSON 对 象 中 ， 代 码 如 下 : 
data.edit = function(obj){ 
if(!obj.id){ 
console.1og (' 没 有 指定 key id, 无 法 定位 修改 数据 ') ;return; 
}; 


var rs = this; 
rs.conn (function (result){ 


Var tr = result.transaction([rs.tbName],"readwrite"); 
Var oStore = tr.objectStore (rs.tbName) 
oStore.put (obj); 
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12.4.5 删除 数据 
删除 数据 和 更 新 数据 需要 的 条 件 类 似 ， 对 于 主键 的 数据 类 型 一 定 要 注意 ， 代 码 如 下 ; 


data.del = function(id){ 


] 7 


Var rs = this; 


rs.conn(function(result){ 
Var tr = result.transaction([rs.tbName],"readwrite"); 
Var oStore = tr.objectStore (rs.tbName); 
oStore.delete(id); 
1); 


12.4.6 前 端 交互 

准备 好 底层 数据 操作 后 ， 就 是 前 端 交 互 部 分 ， 即 通过 用 户 的 操作 执行 相应 的 功能 ， 利 用 
jQuery 来 处 理 DOM 和 事件 ， 代 码 见 【范例 12-2】。 

【范例 12-2 前 端 交互 】 


已 


$ (function(){ 


var listData = function(data){ 
$ ("#1list ul") .append('<li>['+data.id+'] '+data.title+' <a 
href="javascript:;" class="edit" data-id="'+data.id+'"> 编 辑 
</a> <a href="javascript:;" class="del" data-id="'+data.id 
+'"> 删 除 </a></1i>'); 
] 7 
data.list (listData); 
// 清 空 编辑 框 
$ ("#add") .click (function(){ 
$("#title") .val (''); 
$("#info") .val (''); 
$("#save") .attr ("data-type", 0);  // 用 来 标识 添加 还 是 编辑 状态 
1D); 
// 保 存 数据 
$("#save") .click (function(){ 
var id = $(this) .attr("data-type") >> 0; 
// 编 辑 时 需要 确保 数据 类 型 一 至 
Var inf = {"id"rid,titless("#title") .valt), info$("# 
info") .val () ,time:new Date()}; 
if(id !=="0"){ 
data.edit (inf); 
}else{ 
delete inf.id; 
data.add (inf); 
} 
$ ("#1ist ul") .empty(); // 清 空 DOM 树 
S$"#titLle") val ys 
$nio") VGN 
$ (this) .attr ("data-type", 0); // 设 置 一 个 自 定义 属性 
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26. 
2 
28. 
2 
30. 
S31. 
332 
337 
34. 
号 3 
36-。 
3 
38% 
39% 
40. 
41. 
42. 
43. 
44. 
45. 
46. 
47. 
48 . 


和 


data.list(listData); 
Ty 
// 删 除数 据 
$(".del") .live("click",function(){ 
var id = $(this) .attr("data-id"); 
data.del (id>>0); 
$ (this) .parent () .remove () 7 
六 
// 修 改 数 据 
$(" .edit") .live("click",function(){ 
var id = $(this) .attr("data-id")7 
data.get (id>>0, function (rs){ 
$("#title") .val (rs.title); 
$("#info") .val (rs.info); 
$("#save") .attr ("data-type",id); 
ey 
Ds; 
// 搜 索 数 据 
$("#search") .click (function(){ 
$ ("#1list ul") .empty(); 
data.search($ ("#key") .val (), listData); 
Ds; 


RS Morile helor Ix 
SRG| ?和 昌 由 部 S0 
+ 


Or v0 -np 9 - 4- #- 








图 12-6 简易 内 容 管理 系统 


12.5 相关 参考 


e@ Web SQL Database 在 W3C 的 官方 文档 一 一 https://dev.w3.org/html5/webdatabase/。 
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e@ SQLite 数据 库 官网 一 一 http://www.sqlite.org/。 


// 注 意 数据 类 型 
// 删 除 一 行 


// 清 空 DOM 


将 范例 保存 到 html 文件 中 ， 放 置 到 Web 服务 器 下 运行 即 可 ， 效 果 如 图 12-6 所 示 。 


第 13 登 SVG 动画 


我 做 一 部 电脑 ， 产 品 寿命 只 有 2 年 、3 年 ， 最 多 5 年 ， 但 如 果 你 做 动画 做 得 好 ， 这 些 片 
子 能 够 永远 存在 下 去 ! 





史 蒂 夫 … 乔布斯 


SVG 是 一 个 开放 的 W3C 矢量 图 形 标准 ， 它 的 诞生 就 是 为 了 和 商用 矢量 图 形 标准 一 一 
Flash 抗衡 。 本 章节 就 来 介绍 SVG 有 何 魅力 敢 和 Flash 叫板 。 
主要 知识 点 : 


回 角 边框 
阴影 
渐变 


13.1 什么 是 SVG 


SVG 意 为 可 缩放 矢量 图 形 (Scalable Vector Graphics) ， 它 基于 可 扩展 标记 语言 
(XML) ， 用 于 描述 二 维 矢量 图 形 的 一 种 图 形 格式 标准 。 简 单 地 说 ， 就 是 用 代码 来 绘制 矢量 
图 形 的 一 种 方式 。SVG 可 以 构造 3 种 类 型 的 图 形 对 象 ， 矢量 图 形 、 位 图 图 像 和 文字 。 


13.1.1 SVG 的 历史 


自 1995 年 Flash 诞生 以 来 ， 矢 量 图 这 一 图 形 格式 就 展示 了 其 强大 的 生命 力 。 但 是 由 于 其 
商业 专 有 化 的 本 性 ， 使 得 W3C 在 2000 年 开始 制定 一 种 新 型 二 维 矢量 图 形 规范 ， 那 个 时 候 正 
值 互联 网 时 代 来 临 ，W3C 也 想 在 网 络 矢量 图 领域 制定 一 些 标准 。 

2000 年 ， 或 许 被 人 遗忘 的 千年 虫 问题 让 全 球 都 绷 紧 了 神经 ， 恰 好 XML 的 结构 化 优势 帮 
助人 们 度 过 了 这 个 COBOL 数据 危机 ， 而 这 之 后 XML 影响 了 很 多 领域 ， 其 中 也 包括 SVG、 
SQL Server 2000 等 。 

所 以 SVG 基于 XML 且 严 格 遵循 XML 语法 。 当 初 设计 用 “文本 格式 的 描述 语言 来 描述 


图 像 内 容 ” 在 现在 看 来 非常 利于 机 器 阅读 ， 如 搜索 引擎 分 析 。 


2001 年 9 月 4 日 ,发 布 SVG 1.0。 

2003 年 1 月 4 日 ,发 布 SVG 1.1。 

2003 年 1 月 14 日 ， 推 出 SVG 移动 子 版 本 : SVG Tiny 和 SVG Basic。 
2008 年 12 月 22 日， 发 布 SVG Tiny 1.2。 

2011 年 8 月 16 日 ,， 发布 SVG 1.1 (第 2 版 ) ， 成 为 W3C 目前 推荐 的 标准 。 
W3C 目前 仍 正 在 研究 制定 SVG 2。 


所 谓 矢量 图 ， 就 是 使 用 直线 和 曲线 来 描述 图 形 且 这 些 是 通过 数学 公式 计算 得 来 的 ， 通 俗 
的 理解 是 放大 和 缩小 时 皆 不 失真 的 图 形 。 在 设计 行业 中 常见 的 CorelDraw 绘制 的 *.cdr 印刷 图 
文件 、AutoCAD 绘制 的 *dwg 工程 图 文件 和 Illustrator 绘制 的 *.ai 文件 均 是 矢量 图 文件 格式 。 


13.1.2 SVG 的 优 缺 点 


矢量 图 和 传统 顶 格 化 的 位 图 相 比 (如 图 13-1 所 示 ) ， 很 明显 的 差异 是 放大 后 会 有 锯齿 ， 
即 通常 说 的 失真 。 矢 量 图 在 这 些 情况 下 优势 明显 。 








图 13-1 位 图 和 矢量 图 在 放大 时 的 差异 


SVG 就 完成 了 对 矢量 图 形 的 支持 ， 除 此 之 外 ， 还 加 入 了 简单 动画 支持 和 对 文字 特效 的 支 
持 ， 使 矢量 图 从 静态 图 变 为 动态 图 。 在 互联 网 发 达 的 今天 ， 动 态 交 互 特 性 使 其 越 来 越 受 重 
视 。 

SVG 格式 矢量 图 除 放 大 不 失真 之 外 还 具有 以 下 优点 : 


e SVG 图 形 文件 可 读 ， 易 于 修改 和 编辑 。 

@ SVG 与 现 有 技术 可 以 互动 融合 ， 如 动态 部 分 ( 包括 时 序 控制 和 动画 ) 就 是 基于 SMIL 
标准 。 还 可 以 用 JavaScript 控制 SVG 对 象 。 

@ SVG 图 形 格式 可 以 方便 地 创建 文字 索引 ， 从 而 实现 基于 内 容 的 图 像 搜索 。 

e SVG 图 形 可 在 任何 分 辩 率 下 被 高 质量 地 打印 。 

e SVG 图 形 格式 支持 多 种 滤 镜 和 特殊 效果 ， 在 不 改变 图 像 内 容 的 前 提 下 可 以 实现 位 图 格 
式 中 类 似 文字 阴影 的 效果 。 

@ SVG 图 形 格 式 可 以 用 来 动态 生成 图 形 ， 如 有 交互 功能 的 地 图 。 
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但 是 SVG 也 不 是 万 能 的 ， 不 是 绝对 优势 的 图 形 格式 ， 只 是 在 某 些 领域 具有 很 高 的 价值 ， 
所 以 它 也 有 一 些 缺 点 : 


@ 使 用 广泛 性 不 如 Flash。 

e SVG 本 地 运行 环境 下 的 厂家 支持 程度 有 待 提 高 。 

@ 由 于 原始 的 SVG 文件 是 遵从 XML 语法 ， 导 致 数据 采用 未 压缩 的 方式 存放 ， 因 此 相 较 
于 其 他 的 矢量 图 形 格式 ， 同 样 的 文件 内 容 会 比 其 他 的 文件 格式 稍 大 。 

@ 旧版 的 SVG Viewer 无 法 正确 显示 出 使 用 新 版 SVG 格式 的 矢量 图 形 。 

e@ IE 9 以 前 的 浏览 器 不 支持 SVG。 


对 那些 手持 设备 、 车 载 设备 、 无 线 设备 来 说 ， 它 们 的 屏幕 一 般 都 比较 小 ， 而 且 显示 分 辨 
率 低 ，SVG 的 矢量 特性 也 可 以 让 这 些 设 备 清 楚 地 浏览 SVG 图 像 信息 ， 这 都 是 目前 的 位 图 图 
像 不 能 做 到 的 。 


13.1.3 SVG 的 Hello World 


在 支持 的 浏览 器 中 创建 <svg> 标 签 就 可 以 输出 内 容 ， 下 面 的 代码 就 是 显示 黑色 ， 且 大 小 
为 24pt 的 经 典 文字 “Hello World”。 
<body> 
<svg width="100%" height="1000"> 
<text style="fill:#111;font-size:24pt" x="50" y="50">Hello World!</text> 
</svg> 
</body> 


只 不 过 这 些 文字 不 能 被 鼠标 选中 ， 因 为 它 在 svg 中 已 经 不 是 文本 ， 而 是 图 形 数据 。 图 13-2 
是 上 面 代码 的 运行 效果 图 和 HTML 结构 图 。 对 于 IE 9 以 前 版 本 需要 下 载 Adobe SVG Viewer 
插件 才能 正确 看 到 图 13-2 的 运行 结果 。 








Hello world 出 


Hello World! 





Fw lalelilel? BOD 
心 | 编辑 | tezt “svg “body “html 1 
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13.1.4 SVG 的 调用 方式 


除 图 13-2 这 样 直接 嵌入 <svg> 标 签 在 HTML5 中 来 调用 以 外 ， 还 有 几 种 用 于 老 旧 浏览 器 
调用 的 方式 。 

<embed src="sun.svg" width="1100" height="1001" type="image/svgtxml" 

Pluginspage="http://www.adobe.com/svg/viewer/install/" /> 

上 面 的 代码 是 使 用 <embed> 标 签 ，<embed> 标 签 被 所 有 主流 的 浏览 器 支持 ， 并 允许 使 用 
脚本 。 只 是 严格 地 从 HTML 规范 来 讲 ，<embed> 标 签 并 没有 包含 在 任何 HTML 规范 中 ， 这 似 
乎 证 明了 现实 和 理想 的 差距 。 


<object data="sun.svg" width="300" height="100" type="image/svg+xml" 
codebase="http://www.adobe.com/svg/viewer/install/" /> 


<object> 标 签 是 HTML4 的 标准 标签 ， 被 所 有 较 新 的 浏览 器 支持 ， 但 这 种 方式 都 需要 安装 
插件 浏览 器 才能 正确 显示 内 容 。 

对 于 高 级 浏览 器 ， 可 以 直接 打开 *.svg 文档 执行 其 内 容 。 由 于 SVG 和 其 他 Web 标准 完全 
兼容 和 同步 ， 如 XML、CSS 2、XSLT、DOM 2、SMIL、XLINK、HTML 等 。 因 此 ， 在 同一 
Web 页 面 上 ， 如 脚本 编程 等 特性 ， 可 以 同时 应 用 在 HTML 和 SVG 元 素 上 。 


13.2 SVG 形状 


形状 即 是 几何 图 形 。SVG 预定 义 了 一 些 基 础 形状 元 素 ， 可 被 开发 者 使 用 和 操作 ， 通 过 这 
些 形状 能 够 完成 大 部 分 绘制 需求 : 
@ 矩形 <rect> 
@ 圆 形 <circle> 
e 椭圆 <ellipse> 
e 线 <line> 
e@ 折线 <polyline> 
@ 多 边 形 <polygon> 
@ 路 径 <path> 


其 中 路 径 不 能 算 作 传统 意义 上 的 几何 图 形 ， 但 是 在 计算 机 领域 ， 这 是 一 个 常用 概念 ， 具 
有 特殊 用 途 ， 比 如 Photoshop、Flash 等 设计 软件 中 也 有 路 径 的 概念 ， 它 是 一 种 类 似 辅助 线 、 
引导 线 功 能 的 抽象 对 象 。 
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13.2.1 和 珑 形 〈rect) 


style 属性 支持 很 多 CSS 样式 ， 但 是 和 标准 的 CSS 样式 又 有 所 差别 ， 想 要 知道 其 支持 哪 
些 样式 有 一 个 办 法 可 以 做 到 ; 

for (var o in document .getElementsBYyTagName ("rect") [0] .style){ 

console.1o0g (0); // 查 看 对 象 成 员 

在 页 面 中 创建 一 个 <rect> 元 素 ， 通 过 上 面 的 代码 就 可 以 遍历 出 当前 浏览 器 对 <rect> 元 素 支 
持 的 样式 ， 比 如 ， 输 出 的 样式 名 是 “strokeWidth” 则 需要 转换 为 “stroke-width”， 因 为 前 者 
是 JavaScript 操作 的 DHTML 对 象 格式 ， 后 者 才 是 CSS 操作 的 格式 。 

<rect> 标 签 可 用 来 创建 算 形 ， 以 及 矩形 的 变种 如 平行 四 边 形 等 ) ， 下 面 的 代码 创建 了 

-个 宽 300 像素、 高 100 像素 的 矩形 框 : 


<rect width="300" height="100" style="fill:#ccc;stroke-width:1;stroke: 
rgb(0,0,0);" x="10" y="10" /> 


<rect> 标 签 包括 的 常见 属性 如 下 。 


width 和 height 属性 可 定义 矩形 的 高 度 和 宽度 。 

style 属性 用 来 定义 CSS 属性 。 

CSS 的 名] 属性 定义 矩形 的 填充 颜色 (rgb 值 、 颜 色 名 或 者 十 六 进 制 值 ) 。 

CSS 的 stroke-width 属性 定义 算 形 边框 的 宽度 ，CSS 的 stroke 属性 定义 矩形 边框 的 颜 

色 。 

ee x 属性 定义 矩形 的 左 侧 位 置 (例如 ，x="10" 定义 矩形 到 画布 窗口 左 侧 的 距离 是 
10px) 。 

@ y 属性 定义 天 形 的 顶端 位 置 (例如 ，y="10" 定义 珑 形 到 画布 顶端 的 距离 是 10px ) 。 


用 过 Photoshop 的 读者 对 圆 角 肯定 很 熟悉 ，<rect> 也 可 以 设置 成 圆 角 的 效果 ， 如 图 13-3 
所 示 的 对 比 图 。 














13-3 普通 矩形 和 圆 角 变 体 


要 让 标准 矩形 变形 为 圆 角 矩形 需要 添加 rx 和 ry 属性 ， 图 13-3 中 就 分 别 设置 了 “rx=20” 
和 “ry=20”。 
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13.2.2 圆 形 〈circle) 


用 <circle> 标 签 可 以 绘制 一 个 圆 ， 下 面 的 代码 绘制 了 一 个 红色 填充 的 圆 形 : 
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" 
fill="red"/> 


标签 <circle> 的 主要 属性 如 下 。 


e@ cx 属性 定义 圆 点 的 x 坐 标 。 
e@ cy 属性 定义 圆 点 的 y 坐标 。 
e I 属性 是 圆 的 半径 。 


如 果 省 略 cx 和 cy， 圆 的 中 心 会 被 设置 为 (0, 0)。 其 他 属性 和 <rec> 标 签 有 些 类 似 ， 像 


stroke 这 样 的 属性 也 可 以 写 到 style 中 去 。 


13.2.3 椭圆 (ellipse) 


用 <ellipse> 标 签 来 创建 椭圆 ， 椭 圆 与 圆 很 相似 。 不 同 之 处 在 于 椭圆 有 两 个 不 同 的 x 轴 和 y 


轴 半 径 ， 请 看 下 面 的 代码 : 


<ellipse cx="100" cy="310" rx="100" ry="40" style="fill:#ff0;stroke: 
rgb(0,0, 100);stroke-width:2"/> 


<ellipse> 标 签 的 主要 属性 如 下 。 
cx 属性 定义 圆 点 的 x 坐 标 。 
cy 属性 定义 圆 点 的 y 坐标 。 
IX 属性 定义 水 平 半径 。 

ry 属性 定义 垂直 半径 。 


13.2.4 线 (line) 


用 <line> 标 签 来 创建 线条 ， 所 谓 两 点 一 线 ， 通 过 两 组 x 和 y 就 能 绘制 一 条 直线 ， 请 看 下 


面 的 代码 : 
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<line xl1="420" yl="110" x2="260" y2="260" style="stroke:rgb(99,99,99); 
stroke-width:2"/> 


<line> 标 签 的 属性 比较 容易 理解 : 


。 x1 属性 在 x 轴 定 义 线条 的 开始 。 
。 yl1 属性 在 y 轴 定 义 线条 的 开始 。 


。 x2 属性 在 x 轴 定义 线条 的 结束 。 
日 y2 属性 在 y 轴 定义 线条 的 结束 。 


13.2.5 折线 〈polyline) 


用 <polyline> 标 签 来 创建 折线 ， 理 解 起 来 不 难 ， 折 线 就 是 把 一 组 不 同 的 点 连接 起 来 ， 请 看 
下 面 的 代码 : 

<polyline points="300,300 300,320 320,320 320,340 340,340 340,360" 

style="fill: white;stroke:red;stroke-width:2"/> 

<polyline> 标 签 的 主要 属性 是 points 属性 ， 它 是 多 组 坐标 点 ， 坐 标 组 之 间 用 空格 隔 开 ， 每 
组 包含 x 和 y 坐 标 ， 两 者 用 逗号 隔 开 。 至 少 必须 有 两 组 。 


13.2.6 多 边 形 (polygon) 


用 <polygon> 标 签 来 创建 多 边 形 ， 也 就 是 说 至 少 包括 3 个 点 的 坐标 ， 请 看 如 下 代码 : 

<polygon points="220,100 320,180 300,210 170,250" style="fill:#cec:;stroke:#000;stroke- 
width:1"/> 

<polygon> 标 签 的 主要 属性 是 points 属性 ， 它 是 多 组 坐标 点 ， 坐 标 组 之 间 用 空格 隔 开 ， 每 
组 包含 用 逗号 隔 开 的 x 和 y 坐标 。 至 少 必须 有 3 组 。 














<polygon> 和 <polyline> 的 区 别 在 于 <polygon> 会 闭合 首尾 两 个 坐标 点 ， 相 同 之 处 在 于 都 
ER 用 points 属性 来 描述 坐标 点 。 


13.2.7 路 径 (path) 
上 月 <path> 标 签 来 创建 路 径 ， 从 外 观 上 说 和 多 边 形 差不多 ， 但 是 功能 却 不 相同 ， 先 请 看 如 
下 代码 : 


<path d="M450 50 L550 50 L650 150 Z" style="fill:#fff;troke-width:1;stroke: 
#000" /> 


属性 d 用 于 存储 路 径 坐 标点 数据 ， 下 面 的 命令 可 用 于 构造 路 径 数 据 : 














® M=moveto 
® L=lineto 
® H= horizontal lineto 


® V=vertical lineto 
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C = curveto 

S = smooth curveto 

Q = quadratic Belzier curve 

T= smooth quadratic Belzier curveto 
A =elliptical Arc 


Z= closepath 


其 中 M 是 整体 移动 位 置 ，L 是 直线 绘制 ，Z 是 闭合 路 径 ， 除 此 以 外 的 其 他 命令 不 常用 ， 
请 读者 自行 探索 ， 图 13-4 集合 了 多 种 SVG 形状 。 




















图 13-4 多 种 SVG 形状 图 形 


13.3 SVG 滤 镜 


值得 高 兴 的 事情 是 Internet Explorer 10 支 持 SVG 滤 镜 ， 并 且 从 IE 10 起 ， 微 软 废弃 了 原来 下 
特有 的 滤 镜 支持 ， 而 这 些 效 果 完 全 可 以 用 SVG 滤 镜 来 实现 。 常 用 的 SVG 滤 镜 如 表 13-1 所 示 。 


表 13-1 常用 SVG 滤 镜 





























滤 镜 说 明 

他 GaussianBlur 用 于 创建 模糊 效果 

feColorMatrix 用 于 色彩 转换 效果 

feImage 用 于 填充 引用 图 形 

feBlend 用 于 合并 两 个 图 形 ， 属 性 in 和 in2 指定 两 个 图 形 

feOffset 设置 输入 图 像 相对 于 图 像 的 当前 位 置 指定 的 值 ， 经 常 被 用 来 创建 阴影 效果 

feDiffuseLighting 定义 一 个 远 光 源 

的 创建 一 个 指定 的 颜色 和 不 透明 度 值 的 矩形 ， 对 应 属性 是 flood-color 和 flood- 
opacity 
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在 SVG 中 用 <filter> 标 签 定义 滤 镜 。<filter> 标 签 需要 定义 一 个 id 属性 来 向 图 形 滤 镜 进行 
引用 。<filter> 标 签 一 般 嵌 套 在 <defs> 标 签 内 。 


13.3.1 高 斯 模糊 滤 镜 (feGaussianBlur) 


Gauss 即 高 斯 ， 德 国 著名 数学 家 ，18 岁 时 发 现 正 态 分 布 曲线 也 即 高 斯 〈 钟 形 ) 曲线， 其 
函数 被 命名 为 高 斯 分 布 〈 标 准 正 态 分 布 ) 。 我 们 通常 所 说 的 高 斯 模糊 就 是 利用 高 斯 曲线 算法 
计算 而 来 的 ， 图 13-5 就 是 高 斯 模糊 滤 镜 处 理 过 的 椭圆 。 











13-5 SVG 椭圆 高 斯 模糊 效果 
实现 图 13-5 效果 的 代码 如 下 : 


<defs> 

<filter id="Gaussian Blur"> 

<feGaussianBlur in="SourceGraphic" stdDeviation="3" /> 

</filter> 

</defs> 

<ellipse cx="200" cy="150" rx="70" ry="40"style="fill:#ff0000;stroke:#000; 
stroke-width:2;filter:url (#6Gaussian Blur)"/> 


其 中 ，<filter> 标 签 的 id 属性 可 为 滤 镜 定义 一 个 唯一 的 名 称 ， 同 一 滤 镜 可 被 文档 中 的 多 个 
元 素 使 用 。filter:url 属性 用 来 把 元 素 链 接 到 滤 镜 上 。<feGaussianBlur> 标 签 的 stdDeviation 属性 
定义 模糊 的 程度 。in="SourceGraphic" 意 思 是 设置 由 整个 图 像 创建 效果 。 除 此 之 外 还 有 result 
属性 ， 它 是 把 处 理 后 的 输出 存放 到 一 个 临时 缓存 中 ， 这 个 缓存 可 以 在 其 他 滤 镜 的 in 属性 中 被 
调用 。 














13.3.2 色彩 转换 滤 镜 (feColorMatrix) 


在 一 些 重大 哀悼 日 时 ， 很 多 网 站 会 将 整个 网 站 的 页 面 变 成 黑白 灰色 以 示 哀 蛋 。 那 么 这 种 
效果 在 SVG 中 如 何 做 到 呢 ? 答案 是 要 使 用 feColorMatrix 滤 镜 。 


<filter id="grayscale"> 

<feColorMatrix type="matrix" values="0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 
O33 0 .3330833 0 0 OO OO TiO 

</filter> 
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把 上 面 的 代码 放 在 <svg> 标 签 中 ， 然 后 在 CSS 中 进行 如 下 引用 就 能 实现 网 页 的 去 色 效 
果 ， 只 有 黑白 灰 的 状态 ， 没 有 任何 彩色 。 
<style> 


body{filter:url (#grayscale);} 
</style> 





还 有 一 种 调用 方式 就 是 把 <svg> 代 码 另 存 为 一 个 *.svg 文件 ， 比 如 : 


<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<filter id="grayscale"> 
<feColorMatrix type="matrix" values="0.33 0.33 0.33 0 0 0.33 0.33 
OOO 0 0 ORO TOn/ > 
</filter> 
</svg> 


那么 在 CSS 中 调用 时 就 需要 加 上 上 面 的 svg 文件 路 径 : 
filter: url (gray.svg#grayscale); 


这 样 做 有 一 个 明显 的 好 处 ， 即 可 以 定义 很 多 公共 滤 镜 ， 就 像 CSS 文件 一 样 ， 可 以 内 顽 ， 
也 可 以 在 外 部 引用 。 


13.3.3 位 移 滤 镜 (feOffset) 
阴影 是 设计 中 最 重要 的 元 素 之 一 ， 在 W3C 的 推荐 文档 中 ，feOffset 滤 镜 也 是 重点 推荐 滤 


镜 之 一 ， 尤 其 是 在 阴影 处 理 方面 ， 如 图 13-6 所 示 ，4 个 和 矩形 都 添加 了 阴影 效果 ， 有 具体 代码 请 
看 【范例 13-1】。 


TITECTTTEICTTTT 
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图 13-6 feOffset 阴影 滤 镜 


【范例 13-1 feOffset 阴影 滤 镜 】 
1. <svg width="100%" height="500"> 
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2 <filter id = "fl" width = "150%" height = "150%"> 


3 <feOffset result = "offOut" in = "SourceGraphic" dx = "30" dy = 
"30r/> 

4. <feGaussianBlur result = "blurOut" in = "offOut" stdDeviation = 
和 

5 <feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal"/> 

6 </filter> 

i <g stroke-width = "5" filter = "url (#f1)"> 

Bre <rect x = "10%" y = "10%" width = "20%" height = "20%" stroke = 
"blue" fill = "wheat"/> 

9 <rect x = "40%" y = "10%" width = "20%" height = "20%" stroke = 
"green" fill = "tomato"/> 

0 <rect x = "10%" y = "40%" width = "20%" height = "20%" stroke = 
"red" fill = "forestgreen"/> 

I <rect x = "40%" y = "40%" width = "20%" height = "20%" stroke = 
"yellow" fill = "grey"/> 

ij </g> 


13. </svg> 


在 【范例 13-1】 中 ， 运 用 了 <g> 标 签 批量 应 用 在 4 个 矩形 图 形 中 ， 其 中 <filter> 首 先 运 用 
feOffset 滤 镜 使 其 向 右 向 下 位 移 30 像素 并 输出 到 oftout， 如 图 13-6 左边 效果 ， 接 着 用 模糊 滤 
镜 处 理 offout 又 输出 到 一 个 新 的 blurout 中 ， 最 后 用 feBlend 将 blurout 和 原 图 

(SourceGraphic) 合并 形成 最 终 效果 。 


13.4 SVG 渐变 


渐变 是 从 一 种 颜色 到 另 一 种 颜色 的 平滑 过 渡 。 另 外 ， 可 以 把 多 个 颜色 的 过 渡 应 用 到 同一 
个 元 素 上 。SVG 渐变 的 支持 是 通过 渐变 元 素 (linearGradient 和 radialGradient) 以 及 渐变 属性 
(gradientUnits 和 gradientTransform) 提供 的 。 渐 变 颜色 由 stop 元 素 定 义 。 渐 变 元 素 可 用 于 
SVG 形状 的 填充 和 笔划 属性 。 


13.4.1 线性 渐变 (linearGradient) 
<linearGradient> 标 签 的 x1、x2、y1、y2 属性 定义 渐变 开始 和 结束 位 置 。 线 性 渐变 可 以 定 
义 为 水 平 、 垂 直 或 角 渐 变 〈 如 图 13-7 所 示 ) : 


。 当 y1 和 y2 相 等 ， 而 xl 和 x2 不 同时 ， 可 创建 水 平 渐变 。 
日 当 xl 和 x2 相 等 ,而 yl 和 了 2 不 同时 ， 可 创建 符 直 渐变 。 
。 当 xl1 和 x2 不 同 ， 且 yl 和 yY2 不 同时 ， 可 创建 角形 渐变 。 
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13-7 几 种 线性 渐变 模式 
图 13-7 的 实现 代码 如 【范例 13-2】 所 示 。 
【范例 13-2 几 种 线性 渐变 模式 】 


<svg width="100%" height="500"> 

2 <defs> 

3 <linearGradient id="gradl" xl1="0%" yl="0%" x2="0%" y2="100%"> 

4. <stop offset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/> 
证 <stop offset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/> 
6% </linearGradient> 

了 < <linearGradient id="grad2" xl1="0%" yl="0%" x2="100%" y2="0%"> 

:局 <stop offset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/> 
9 <stop offset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/> 
10. </linearGradient> 

i <linearGradient id="grad3" xl1="0%" yl="50%" x2="100%" y2="0%"> 

和 2 <stop offset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/> 
3 <stop offset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/> 
14. </linearGradient> 

15. <linearGradient id="grad4" xl1="50%" yl="0%" x2="0%" y2="100%"> 

Tbe <stop offset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/> 
a <stop offset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/> 
18. </linearGradient> 

98 </defs> 

人 20 <rect x="10" y="10" width="100" height="50" fill="url (#grad1l)" /> 

21, <rect x="10" y="110" width="100" height="50" fil1="url (#grad2)" /> 

228 <rect x="210" y="10" width="100" height="50" fill="url (#grad3)" /> 

3 <rect x="210" y="110" width="100" height="50" fill="url(#grad4)" /> 
24. </svg> 


13.4.2 放射 渐变 (radialGradient) 


<radialGradient> 标 签 cx、cy 和 r 属 性 定义 最 外 层 圆 的 位 置 和 大 小 ， 人 x 和 fy 则 定义 最 内 层 
， 如 图 13-8 所 示 。 











后 
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图 13-8 放射 渐变 
放射 渐变 只 有 位 置 的 区 别 ， 没 有 方向 的 变化 ， 图 13-8 效果 的 实现 代码 如 下 : 


<defs> 
<radialGradient id="gradl" cx="50%" cy="50%" r="80%" fx="50%" fy="50%"> 
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
<stop offset="10%" style="stop-color:#ccc;stop-opacity:1" /> 
<stop offset="50%"style="stop-color:rgb(255,120,122);stop-opacity:0.5"/> 
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
</radialGradient> 


</defs> 
<rect x="10" y="10" width="200" height="150" fill="ur]l (#grad1)" /> 





13.5 制作 简单 的 SVG 动画 一 一 太阳 系 


在 这 个 实例 中 ， 通 过 SVG 形状 绘制 太阳 ， 并 且 让 地 球 沿 椭圆 形 轨 道 公 转 ， 也 给 读者 展示 
“下 SVG 动画 的 使 用 方法 ， 预 览 效 果 如 图 13-9 所 示 。 
阅 会 运 苇 的 卦 月 太阳 条 一 oxills Firefex 
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图 13-9 会 运转 的 太阳 系 
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13.5.1 SVG 绘制 的 太阳 和 地 球 公 转轨 迹 
在 字 宙 中 ， 星 空 是 黑色 的 ， 所 以 创建 画布 后 先 设置 一 下 星空 的 颜色 ; 
<rect x='0' y='0' width='100%' height="'100%' fill='black' /> 
然后 在 这 个 漆黑 的 宇宙 里 绘制 一 个 红彤彤 的 太阳 ， 这 就 要 运用 <cirele> 标 签 和 放射 渐变 


<radialGradient id='sunfill' cx="50%' cy="'50%' r="'100%' > 
<stop stop-color='red' offset="'0%' stop-opacity='1' /> 
<stop stop-color='yellow' offset="'95%' stop-opacity='1' /> 
<stop stop-color='white' offset='100%' stop-opacity='1' /> 
</radialGradient> 
<circle cx="'660' cy="'250' r="'60' fill="'url (#sunfill)' /> 


众所周知 ， 地 球 是 围绕 太阳 公转 的 ， 所 以 需要 用 <path> 标 签 设置 一 个 椭圆 形 公转 轨迹 : 


<path id='pathl' d="'M1200,200 h 0 a600,200 0 1,0 1,1 z' fill='none' 
stroke='white' stroke-width='1' /> 


13.5.2 贴图 地 球 和 地 月 系统 


地 月 系统 实际 上 也 是 一 个 物体 围绕 另 一 个 物体 按照 特定 轨迹 路 径 运 动 的 系统 。 而 这 个 系 
统 是 太阳 系 的 一 个 独立 运行 物体 ， 最 好 的 办 法 就 是 把 地 月 系统 组 合成 一 个 相对 独立 的 对 象 ， 
这 就 需要 用 到 <g> 标 签 ， 这 个 <g> 标 签 组 合 的 地 月 系统 是 独立 体 ， 需 要 定义 在 <defs> 标 签 中 ， 
在 需要 调用 的 地 方 使 用 ， 否 则 它 会 莫名 地 显示 在 画布 的 某 个 角落 。 
给 <g> 标 签 id 定义 为 “E”， 然 后 放置 一 个 外 部 引用 的 gif 图 片 ， 简 单调 整 一 下 位 置 和 尺 
寸 ， 其 代码 如 下 : 
<g id='E' > 
<image xlink:href="earth.gif" x="330" y="75" height="30px" 
width="30px"></image> 
</g> 
然后 在 <g> 标 签 里 再 加 上 地 月 系统 的 月 亮 运动 轨迹 : 
<path id='path2' d='M390,80 h 0 a50,19 0 1,0 1,1 z' fill='none' stroke= 
"white' stroke-width='1' /> 
这 个 path2 的 坐标 实际 上 是 相对 image 定义 的 地 球 的 ， 和 pathl 定义 的 地 球 运动 轨迹 有 所 
不 同 。 然 后 绘制 一 个 简单 的 白色 月 亮 ， 并 让 其 按 path2 定义 的 轨迹 旋转 ， 具 体 代码 如 下 : 
<circle cx="'0'cy='0'r="'5' fill='"'white' stroke='black' stroke-width='1' > 
<animateMotion dur='30s' repeatCount='indefinite' > 


<mpath xlink:href='#path2' /> 
</animateMotion > 
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</circle> 


其 中 <animateMotion> 标 签 用 于 定义 动画 ， 属 性 dur 设置 了 这 个 动画 完成 的 时 间 周期 是 30 
秒 ， 对 应 月 球 围绕 地 球 转动 周期 30 天 ， 运 行 次 数 repeatCount 为 无 限 次 ， 路 径 就 是 前 面 定义 
的 path2 。 
至 此 ， 地 月 系统 已 经 完成 ， 但 只 是 存在 于 <defs> 预 定义 中 ， 还 没有 被 调 到 画布 上 ， 所 以 
在 画布 上 看 不 到 任何 效果 ， 如 何 让 地 月 系统 显示 出 来 呢 ? 可 使 用 <use> 标 签 ， 请 看 下 面 的 代码 ; 
<use x="0" y="0" xlink:href="#E"> 
<animateMotion dur='365s' repeatCount='indefinite' > 
<mpath xlink:href='#path1l' /> 
</animateMotion > 
</use> 
还 用 到 了 <animateMotion> 标 签 ， 因 为 地 球 也 是 围绕 太阳 转动 的 ， 其 参数 都 相似 ， 只 是 路 
径 引 用 不 同 ， 其 <use> 就 相当 于 前 面 绘制 月 球 的 <circle> 标 签 ， 这 里 只 是 引用 了 整个 <g> 标 签 定 
义 的 更 为 复杂 的 对 象 而 已 。 


13.5.3 太阳 系 


通过 前 面 的 准备 ， 现 在 就 可 以 完成 太阳 系 的 运动 效果 了 。 图 13-9 的 完整 实现 代码 如 【 范 
例 13-3】 所 示 。 


【范例 13-3 运动 的 太阳 系 】 


1. <!DOCTYPE html5> 

2. <html> 

3 <head> 

4. <title> 会 运转 的 地 月 太阳 系 </title> 

3 </head> 

6. <body> 

7. <svg width="100%" height="1000"> 

8,. <defs> 

局 <g id='E' transform='translate(-340,-90)'> 

TO <image xlink:href="earth.gif" "3330 Y="715™" height="30px" 
width="30px"></image> 

ds <path id='path2' d='M390,80 h 0 a50,19 0 1,0 1,1 z' fill='none' 
stroke='white' stroke-width='1' /> 

2 <!-- 让 月 亮 转 起 来 --> 

13< <circle cx='0' cy='0' r='5' fill='white' stroke='black' stroke- 
width='1' > 

14。 <animateMotion dur='30s' repeatCount='indefinite' > 

LS <mpath xlink:href='#path2' /> 

16。 </animateMotion > 

汪汪 </circle> 

TS </g> 

19s <radialGradient id='sunfill' cx="'50%' cy="'50%' r="'100%' > 

20. <stop stop-color='red' offset='0%' stop-opacity='1' /> 
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2 <stop stop-color='yellow' offset='95%' stop-opacity='1' /> 

222 = <stop stop-color='white' offset='100%' stop-opacity='1' /> 

23= </radialGradient> 

24. </defs> 

25. <!-- 黑 色 星空 背景 --> 

26% <rect x="'0' y='0' width='100%' height="'100%' fill='black' /> 

2750<1== 术 阳 ==> 

县 85 <circle cx='660' cy='250' r=160! fill="'url (#sunfill)' /> 

29. <!-- 地 球 公转 轨道 --> 

30% <path id='pathl' d="'M1200,200 h 0 a600,200 0 1,0 1,1 z' fill='none' 
stroke='white' stroke-width='1' /> 


31. <!-- 让 地 球 转 起 来 --> 


2 <use x="0" y="0" xlink:href="#E"> 

B38 <animateMotion dur='365s' repeatCount='indefinite' > 
34. <mpath xlink:href='#pathl' /> 

3 </animateMotion > 

汪 丰 : </use> 


37. </svg> 
38. </body> 
39. </html> 


13.6 相关 参考 


e 世界 地 图 一 一 https://upload.wikimedia.org/wikipedia/commons/0/03/BlankMap-World6.svg。 
e SVG 元 素 一 一 https://developer.mozilla.org/en-US/docs/Web/SVG/Element. 
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第 14 但 Canvas 的 初步 应 用 
一 一 再 回 一 个 哆 啦 A 梦 


用 一 根 线条 去 散步 ! 
一 一 瑞士 画家 保罗 。 克 莱 


人 类 对 绘画 的 追求 自古 已 有 ， 据 说 最 早 的 人 类 绘画 可 以 追溯 到 32000 年 前 的 法 国 肖 维 岩 
洞 动物 壁画 ， 而 Canvas 就 是 HTML5 给 网 页 加 的 一 张 自 由 画布 。 
本 章 主 要 知识 点 : 


Canvas 绘制 直线 
Canvas 绘制 矩形 
Canvas 绘制 曲线 
Canvas 绘制 文本 














14.1 什么 是 Canvas 


Canvas 元 素 是 HTMLS5 的 一 部 分 ， 允 许 脚 本 语言 动态 泻 染 位 图 像 。Canvas 像 <div> 一 
样 ， 在 HTML5 中 就 是 一 个 常用 的 标签 ， 主 要 用 于 2D 绘画 ， 将 来 可 能 会 用 于 3D 绘画 。 


14.1.1 Canvas 起 源 


<canvas> 标 签 最 早 由 苹果 公司 在 Safari 浏览 器 中 引入 。 对 HTML 进行 这 一 扩展 的 原因 在 
于 ， 和 希望 HTML 在 Safari 中 的 绘图 能 力也 能 为 Mac OS X 桌面 的 Dashboard 组 件 所 使 用 ， 并 
且 苹 果 公 司 希 望 在 Dashboard 中 支持 脚本 化 的 图 形 。 

在 没有 Canvas 元 素 的 条 件 下 绘制 一 条 对 角 线 该 怎么 办 ? 这 个 需求 非常 简单 ， 但 实际 上 ， 
如 果 没 有 一 套 二 维 绘图 API， 这 会 是 一 项 相当 复杂 的 工作 。 

HTML5 Canvas 能 够 提供 这 样 的 功能 ， 对 浏览 器 端 来 说 非常 有 用 ， 因 此 Canvas 被 纳入 了 
HTML5 规范 。 


起 初 ， 苹 果 公司 曾 上 暗示 可 能 会 为 WHATWG 草案 中 的 Canvas 规范 申请 知识 产权 ， 这 在 当 
时 引起 了 一 些 Web 标准 化 追随 者 的 关注 。 不 过 ， 苹 果 公司 最 终 还 是 按照 W3C 的 免 版 税 专利 
权 许可 条 款 公 开 了 其 专利 。 

微软 在 早期 浏览 器 中 为 了 解决 网 页 中 绘图 的 问题 ， 选 择 了 VML 的 解决 方案 ， 直 到 IE 9 
的 时 候 才 放弃 这 一 特 立 独行 的 解决 办 法 转 而 支持 Canvas。 


14.1.2 Canvas 的 支持 情 ; 


现在 ， 主 流 浏 览 器 IE 9+、Chrome、Safari、Firefox、Opera 对 Canvas 都 有 很 好 的 支持 
度 ，IE 8 及 之 前 的 版 本 则 不 支持 Canvas， 参 见 表 14-1。 


表 14-1 各 浏览 器 对 Canvas 最 早 开始 支持 的 版 本 








对 于 IE 8 及 以 前 的 版 本 ， 可 以 使 用 Google Chrome 浏览 器 内 嵌 框 架 〈 如 图 14-1 所 示 ) 来 
支持 Canvas。 这 是 Google 推出 的 一 款 免 费 Internet Explorer 专用 插件 ， 使 用 此 插件 ， 用 户 可 
以 通过 Internet Explorer 的 用 户 界面 ， 以 Chrome 内 核 的 泻 染 方式 浏览 网 页 。Chrome Frame 会 
把 最 新 版 的 Chrome Webkit 内 核 和 JavaScript 引擎 注入 IE 中 ， 而 不 会 改变 用 户 原来 的 上 网 方 
趟 5 





图 14-1 Google Chrome Frame 谷歌 浏览 器 内 赃 框 架 


14.1.3 Canvas 优 缺 点 及 与 SVG 的 对 比 


Canvas 的 优点 是 : 


e@ 不 需要 将 所 绘制 图 像 中 的 每 个 图 元 当 作 对 象 存储 ， 因 此 执行 性 能 非常 好 。 
e@ 实现 API 相对 于 其 他 语言 或 工具 来 说 比较 简单 。 
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Canvas 的 缺点 是 : 

日 绘制 的 图 形 是 静态 的 ， 要 制作 动画 效果 需要 处 理 每 一 帧 的 图 形 ， 对 于 复杂 的 图 形 和 大 
型 动画 ， 目 前 看 来 不 及 Flash。 

@ 到 目前 为 止 只 支持 2D 绘图 ， 要 想 实 现 3D 绘图 则 需要 借助 第 三 方 类 库 ， 如 three.js 或 
Papervision3D 等 。 


Canvas 和 SVG 对 比 而 言 区 别 在 于 : 

@ Canvas 本 质 上 是 一 个 位 图 画布 ， 其 上 绘制 的 图 形 是 不 可 缩放 的 ， 不 能 像 SVG 图 像 那 
样 可 以 被 放大 和 缩小 。 

e@ 用 Canvas 绘 制 出 来 的 对 象 不 属于 页 面 DOM 结构 或 者 任何 命名 空间 ， 像 是 一 个 被 公认 
支持 的 插件 一 样 ，SVG 图 像 却 可 以 在 不 同 的 分 辨 率 下 流畅 地 缩放 ， 并 且 支持 点 击 检 
测 ， 能 检测 到 和 鼠标 点 击 了 图 像 上 的 哪个 点 。 

e@ Canvas 本 身 没有 绘图 能 力 ， 必 须 依 赖 JavaScript 才能 完成 ， 而 SVG 本 身 就 能 完成 
绘图 。 

Canvas 和 SVG 的 对 比如 表 14-2 所 示 。 


表 14-2 Canvas 和 SVG 对 比 


Canvas 
依 亲 分辩 率 ， 不 可 自由 才 
不 六 村 事 人 处理 器 
色 的 文本 兴 妆 能 力 
估 吉 Javasenpt 给 制图 
最 适合 图 像 省 集 型 的 游戏 


图 形 处 理性 能 良好 复杂 度 高 会 减 慢 泻 染 速度 〈 任 何 过 度 使 用 DOM 的 应 用 都 不 快 ) 











14.1.4 Canvas 与 JavaScript 


JavaScript 是 一 门 语言 ， 而 且 是 嵌入 式 的 、“ 寄 宿 式 ”的 语言 ， 只 要 宿主 环境 提供 了 ， 它 
都 能 操作 。Canvas 是 浏览 器 内 核 提 供给 JavaScript 的 一 组 图 形 API， 也 就 是 说 能 够 操作 
Canvas 绘图 的 不 只 有 JavaScript， 很 多 软件 都 有 绘图 API， 但 是 操作 语言 不 是 JavaScript， 有 
可 能 是 C++ 等 。 

JavaScript 能 够 操作 这 些 API 都 得 益 于 浏览 器 厂家 的 提供 ， 甚 至 第 三 方 插件 的 提供 ， 比 如 
Flash， 它 也 是 可 以 和 JavaScript 交互 的 。 
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14.1.5 Canvas 的 发 展 


虽然 2012 年 遇 到 Facebook 放弃 发 展 HTML5 的 负面 影响 ， 但 是 在 2013 年 ， 很 多 厂家 
始 使 用 HTML5， 也 使 得 Canvas 蓬勃 发 展 起 来 ，IE、 欧 朋 等 浏览 器 厂家 纷纷 开启 长 期 闲置 的 
WEBGL 硬件 加 速 ， 以 UNREAL3 引擎 制作 的 DEMO 更 展现 了 令 人 惊叹 的 画面 效果 。 

国外 的 canv.as 图 片 社区 就 主要 基于 Canvas 技术 ， 而 国内 大 型 浏览 器 厂商 UC 则 推出 了 
基于 Canvas 的 X-Canvas 引擎 ， 解 决 了 诸多 性 能 和 兼容 问题 ， 像 烦琐 的 物理 碰撞 检测 都 提供 
了 独立 的 物理 碰撞 引擎 。 

以 前 的 网 页 只 是 展示 数据 ， 而 今 ， 互 联网 的 发 展 使 得 网 页 承载 更 多 、 更 重要 的 工作 ， 原 
本 那些 需要 桌面 应 用 才能 完成 的 任务 ， 现 在 在 网 页 上 也 能 完成 ，Canvas 的 出 现 是 对 Web 应 用 
的 锦上添花 ， 大 家 有 理由 相信 Web 应 用 会 越 来 越 好 ，Canvas 也 会 越 来 越 好 ， 一 个 比较 实际 的 





























例子 就 是 天 猫 双 十 一 购物 狂欢 节 推 出 的 红包 游戏 ， 它 就 是 基于 Canvas 的 ， 如 图 14-2 所 示 。 
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号 | 编辑 canyas#h- -- -Painter divwe]_Kh...be-scene -三 只]_Ta -content -dvgcontent ‘body htnl js-Eecko24 











图 14-2 天 猫 双 十 一 活动 游戏 


14.1.6 Canvas 标签 的 使 用 


要 使 用 Canvas 标签 ， 只 需要 在 HTML5 网 页 中 添加 Canvas 元 素 即 可 : 


<canvas id="myCanvasTag" width="400" height="400"></canvas> 
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14.2 绘制 形状 和 文字 


所 谓 形状 是 指 几 何 图 案 ， 使 用 Canvas 可 以 绘制 各 种 图 案 ， 包 括 和 矩形 、 路 径 、 线 条 、 填 
充 、 圆 弧 以 及 贝 塞 尔 曲线 和 二 次 曲线 。Canvas 标记 是 一 种 “即时 模式 ”将 绘制 命令 直接 发 
送 到 图 形 硬 件 ) 的 二 维 绘制 方式 ， 可 用 于 传送 实时 图 形 、 动 画 或 交互 式 游戏 ， 无 须 下 载 单 独 
的 插件 。 





14.2.1 直线 (lineTo) 
直线 是 绘图 的 基础 ， 如 果 刚 刚 接触 Canvas， 就 应 该 先 看 看 Canvas 是 如 何 绘制 直线 的 ， 
【范例 14-1】 就 是 一 个 简单 的 绘制 直线 的 例子 。 


【范例 14-1 利用 lineTo 绘制 直线 】 
1. <canvas id="lineto" width="400" height="500"> 您 的 浏览 器 不 支持 canvas 。 


</canvas> 
<script> 
3 var dw = document .getElementById("#lineto") .getContext ("2d"); 
4 // 移 动 到 起 点 
有 dw.moveTo(50, 50); 
6. // 绘 制 到 终点 
dw.lineTo(420, 200); 
8 // 绘 制 完成 
9 dw.stroke () 7 
10. // 新 画 一 条 
了 dw.beginPath (); 
2 // 设 置 线 条 宽度 
13. dw.lineWidth=10; 
A // 设 置 填充 颜色 
5 dw.strokeStyle = "#ccc"; 
6% // 移 动 到 起 点 
he dw.moveTo(450, 50); 
Ie // 绘 制 到 终点 
9 dw.lineTo(100, 250); 
20. // 绘 制 完成 
21。 dw.stroke () 7 


22. </script> 


【范例 14-1】 运 行 效果 如 图 14-3 所 示 ， 上 面 代码 中 第 一 行 的 <canvas> 标 签 是 嵌入 
HTML5 网 页 的 元 素 ， 如 果 浏 览 器 不 支持 则 会 显示 “您 的 浏览 器 不 支持 canvas”。 
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查看 历史 人 书签 名。 工具 中 天助 中 
[Dcens [El 








图 14-3 用 lineTo 绘 制 两 条 直线 





第 3 行 的 变量 dw 获得 document.getElementById("#lineto").getContext("2d") 返 回 的 一 个 画 
布 对 象 ， 这 个 对 象 提 供 了 画布 所 使 用 的 大 多 数 方法 。 目 前 ，Canvas 只 支持 二 维 环境 ， 所 以 参 
数 只 能 是 “2d”。getContext 方 法 只 有 canvas 对 象 才 提供 。 

两 点 决定 一 线 ， 首 先 要 将 画笔 移动 (moveTo) 到 起 点 ， 然 后 绘制 〈lineTo) 到 终点 ， 最 
后 将 这 个 路 径 完整 地 绘制 (stroke) 到 画布 上 呈现 出 来 。 

在 第 11 行 又 绘制 一 条 新 的 直线 ， 而 且 直线 的 大 小 还 可 以 重新 设置 ， 也 就 是 说 ， 每 一 次 绘 
制 都 可 以 重新 设置 画笔 的 大 小 甚至 颜色 等 属性 ， 对 【范例 14-1】 中 用 到 的 方法 /属性 及 其 说 明 
请 见 表 14-3 。 














表 14-3 canvas 常见 方法 /属性 及 其 说 明 

















属性 /方法 说 明 

moveTo() 把 路 径 移动 到 画布 中 的 指定 点 ， 不 创建 线条 

lineTo0 添加 一 个 新 点 ， 然 后 在 画布 中 创建 从 该 点 到 最 后 指定 点 的 线条 

strokeO 绘制 已 定义 的 路 径 

beginPath() 起 始 一 条 新 路 径 ， 或 重 置 当前 路 径 

line Width 设置 或 返回 当前 的 线条 宽度 

strokeStyle 设置 或 返回 用 于 笔触 的 颜色 、 渐 变 或 模式 

lineCap 设置 或 返回 线条 的 结束 端点 样式 

其 中 strokeStyle 属性 不 仅 接受 颜色 值 ， 还 接受 渐变 颜色 、 放 射 渐变 颜色 填充 和 图 片 填 

充 ， 有 点 像 Photoshop 中 的 油漆 桶 工具 ' 今 .， 具 体 用 法 请 参考 第 15 章 的 内 容 。lineCap 属性 见 


用 于 设置 直线 端点 的 样式 ， 即 平 直 (butt) 端点 、 圆 形 〈round) 端点 和 正方 形 〈square) 端 
点 ， 其 中 平 直 端点 是 默认 样式 ， 它 比 整形 端点 要 短 一 些 ， 对 比 效果 如 图 14-4 所 示 。 
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图 14-4 canvas 的 lineCap 线条 端点 样式 对 比 图 


14.2.2 和 珑 形 〈rect) 


接 下 来 看 看 矩形 是 如 何 绘 制 的 ， 在 直角 坐标 系 中 ， 算 形 的 一 个 角 点 加 上 距离 就 可 以 确定 
其 位 置 和 大 小 ， 下 面 的 【范例 14-2】 绘 制 出 的 矩形 如 图 14-5 所 示 。 





vas ~ orills Pirefer El 
工件 CI) 久 轿 副 看 Y 历史 人 G) 书签 虽 。 琶 T 香 肋 0 
Cum 


iene 加- C | 图- ER 万 | 昌 








图 14-5 canvas 绘制 的 矩形 


【范例 14-2 绘制 矩形 】 
// 设 置 线条 宽度 
dw.lineWidth=10; 

// 设 置 填充 颜色 
dw.strokeStyle = "#ccc"; 
/ /绘制 算 形 
dw.rect (50,50,300,300); 
/ /绘制 完 成 

dw.stroke (); 


对 比 14-1 和 14-2 两 个 范例 ， 是 否 感 觉 很 相似 ? 是 的 ， 都 会 用 到 线条 ， 所 以 一 些 属性 设 


oaum 上 wwN 
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置 都 是 相同 的 。 在 canvas 中 与 矩形 绘制 相关 的 还 有 几 个 方法 ， 具 体 说 明 请 见 表 14-4。 
表 14-4 canvas 矩形 绘制 相关 方法 
说 明 








绘制 和 形 只 


fillRect(x,y,width,height) 绘制 “被 填充 ”的 矩形 





fillStyle 设置 或 返回 用 于 填充 绘画 的 颜色 、 渐 变 或 模式 


strokeRect(x,y,width,height) | 绘制 矩形 〈 无 填充 ) 














clearRect() 在 给 定 的 矩形 内 清除 指定 的 像素 
fl0 根据 当前 绘图 路 径 填 充 





通过 表 14-4 可 知 ，【 范 例 14-2】 最 后 两 行 代码 还 可 以 换 成 ; 

dw.strokeRect (50,50,300,300); 

如 果 要 绘制 一 个 实心 的 矩形 ， 就 需要 用 fillRect() 方 法 ， 并 且 还 要 设置 fillStyle 属性 ， 其 
设置 和 strokeStyle 类 似 ， 效 果 如 图 14-6 所 示 ， 有 具体 代码 如 下 : 


// 设 置 填充 颜色 

dw.fillStyle = "#ccc"; 

// 绘 制 实心 矩形 

dw.fillRect (50,50,300,300); 





a Pirefoe 
查看 凡 历史 S) 书 答 @ 工 具 中 帮助 好 
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图 14-6 fillRect 绘制 实心 矩形 


同样 也 可 以 先 绘制 一 个 矩形 路 径 ， 然 后 再 用 fnl(0 方 法 填充 ， 就 像 在 Photoshop 中 ， 先 用 
选区 工具 后 .选择 一 个 区 域 〈 相 当 于 路 径 ) ， 再 用 油漆 桶 工具 您 .填充 〈 相 当 于 fnl0) ， 有 具体 
代码 如 下 : 
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dw.rect (50,50,300,300); 
dw.fill(); 


14.2.3 辆 (arc) 
圆 的 某 一 部 分 是 弧 ， 那 么 一 个 360” 的 弧 就 是 一 个 圆 。 在 canvas 中 只 有 直接 绘制 圆 弧 的 
方法 ， 没 有 直接 绘制 圆 的 方法 。 绘 制 一 个 圆 弧 很 简单 ， 代 码 如 下 : 


dw.arc(100,75,50,0,270*Math.PI/180, false); 
dw.stroke(); 





圆 弧 绘制 方法 arc (x,y,sAngle,eAngle,counterclockwise ) 中 的 参数 比较 复杂 ，x 是 圆 的 中 
心 的 x 坐标 ,y 是 圆 的 中 心 的 y 坐标 , r 是 圆 的 半径 ，sAngle 是 起 始 角 ， 以 弧度 计 〔( 弧 的 圆 形 
的 三 点 钟 位 置 是 0”， 如 图 14-7 所 示 ) ，eAngle 是 结束 角 ，counterclockwise 是 可 选 的 ，false 
表示 顺 时 针 绘图 ，true 表示 逆 时 针 绘图 。 

Math.PI 是 JavaScript 内 置 的 圆周 率 ，270*Math.PI180 就 是 270” 的 弧 长 。 第 5 个 参数 默 
认 是 顺 时 针 。 如 果 要 对 这 个 弧 形 进行 填充 ， 那 么 追加 下 面 的 代码 即 可 : 

dw.fillStyle="#000"; 

qdw.fil1() 


这 个 填充 弧 形 图 案 最 终 如 图 14-8 所 示 。 














1*PI 





0.5*PI 
14-7 arc 绘制 示意 图 图 14-8 弧 形 填充 图 案 





现在 离 绘制 圆 形 已 经 很 接近 了 ， 只 需要 把 270” 改 为 360” 即 可 ， 所 以 计算 之 后 ，arc 的 
第 4 个 参数 就 是 2*Math.PI， 请 读者 自行 动手 验证 。 
14.2.4 弧 和 圆 角 (arcTo) 


圆 角 是 常见 的 应 用 形状 ， 除 使 用 arc 通过 确定 的 中 心 点 来 绘制 弧 形 之 外 ， 还 可 通过 切线 
来 绘制 弧 形 ， 这 就 是 arcTo。 它 有 一 个 好 处 ， 即 可 以 在 不 知道 中 心 坐标 的 情况 下 把 接 下 来 需 
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要 绘制 的 弧 形 绘制 出 来 ， 计 算 中 心 坐标 可 不 是 方便 的 事情 ， 这 个 时 候 arcTo 就 派 上 大 用 场 
了 。arcTo 方 法 有 5 个 参数 ， 分 别 是 弧 的 起 点 的 x 众 标 、 弧 的 起 点 的 y 坐标 、 弧 的 终点 的 x 坐 
标 、 弧 的 终点 的 y 坐标 和 弧 的 半径 。 图 14-9 是 它 的 用 法 对 比 图 。 





A(100, 20) B(150, 20) 


r=30 
Cc(150,70) 





A(100, 20) B(250, 20) 


r=30 


Cc(150,70) 





14-9 arcTo 用 法 示意 图 
【范例 14-3】 是 图 14-9 上 半 部 分 的 一 个 弧 形 效果 (不 包含 AB 到 BC 之 间 的 线条 ) : 
【范例 14-3 绘制 弧 形 】 


1. // 设 置 线条 宽度 

2. dw.lineWidth=2; 

3. // 设 置 填充 颜色 

4. dw.strokeStyle = "#ccc"; 

5. dw.beginPath(); 

6. // 绘 制 直线 

7. dw.moveTo(20,20); 

8. dw.lineTo(100,20); 

9. // 绘 制 圆 弧 

10. dw.arcTo(150,20,150,70,30); 

11. dw.lineTo(150,120); // 创建 垂直 线 
12 . // 绘 制 完成 

13. dw.stroke(); 

14. dw.beginPath(); 

15. dw.strokeStyle = "#ddd"; 

16. dw.lineWidth=1; 

17. dw.moveTo(100,20); 

18. dw.lineTo(150,20); // 创建 垂直 线 
19. dw.lineTo(150,70); // 创建 垂直 线 


D 
口 


。dw.stroke () 7 


首先 设置 画笔 样式 ， 如 宽度 为 2、 颜 色 为 灰色 : 再 将 画笔 移动 到 起 点 位 置 (20,20)， 绘 制 
-条 直线 ; 然后 画 弧 形 ; 最 后 再 画 一 条 直线 。 完 成 绘制 后 ， 为 了 便于 对 比 ， 又 新 起 一 个 绘画 
路 径 任务 ， 将 颜色 变 淡 ， 宽 度 变 窗 ， 位 置 移 动 到 弧 形 开始 的 A 点 位 置 〈 如 图 14-9 所 示 ) ， 接 
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着 绘制 两 条 直线 ， 通 过 效果 图 会 发 现 ，AB 和 BC 就 是 这 个 弧 的 切线 。 下 面 是 图 14-9 中 另 一 
个 弧 形 的 代码 。 


// 设 置 线条 宽度 

dw.lineWidth=2; 

// 设 置 填充 颜色 

dw.strokeStyle = "#ccc"; 
dw.beginPath(); 

// 绘 制 直线 

dw.moveTo (20,20); 

dw.lineTo(100,20); 

// 绘 制 圆 弧 

dw.arcTo(250,20,150,70,30); 

// 绘 制 完成 

dw.stroke (); 

dw.beginPath (); 

dw.strokeStyle = "#ddd"; 
dw.lineWidth=1; 

dw.moveTo(100,20); 

dw.1lineTo (250,20); // 创建 垂直 线 
dw.lineTo(150,70); // 创建 垂直 线 
dw.stroke () 7 


14.2.5 贝 塞 尔 曲 线 (quadraticCurveTo) 


圆 和 弧 都 是 规则 的 曲线 图 形 ， 而 很 多 项 目 中 还 需要 绘制 一 些 不 规则 的 曲线 图 形 ， 这 时 候 
就 需要 用 到 贝 塞 尔 曲 线 。 贝 赛 尔 曲 线 又 称 贝 兹 曲线 ， 是 电脑 图 形 学 中 相当 重要 的 参数 曲线 。 
贝 塞 尔 曲 线 于 1962 年 由 法 国 工程 师 皮 埃 尔 。 贝 塞 尔 (Pierre Bezier) 所 发 表 ， 他 运用 贝 塞 尔 
线 来 为 汽车 的 主体 进行 设计 。 
如 果 要 绘制 如 图 14-10 所 示 的 曲线 ， 用 二 次 方 贝 塞 尔 曲线 就 可 以 轻松 做 到 。 


Re 



































图 14-10 二 次 方 贝 塞 尔 曲线 绘图 
使 用 quadraticCurveTo() 方 法 ， 实 际 上 是 通过 3 个 点 (起 点 、 控 制 点 和 终点 ， 其 中 起 点 默 
认 是 当前 位 置 ) ， 利 用 二 次 方 贝 塞 尔 曲线 公式 来 绘制 曲线 ， 绘 制图 14-10 的 代码 如 下 : 


dw.moveTo (20,20); 
dw.quadraticCurveTo (20,100,200,20) 7 
dw.stroke(); 
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二 次 方 贝 塞 尔 曲线 需要 两 个 点 。 第 一 个 点 是 用 于 二 次 方 贝 塞 尔 计算 的 控制 点 ， 第 二 个 点 
是 曲线 的 结束 点 。 曲 线 的 开始 点 是 当前 路 径 中 最 后 一 个 点 。 如 果 路 径 不 存在 ， 那 么 请 使 用 
beginPath() 和 moveTo() 方法 来 定义 开始 点 。 其 简单 原理 如 图 14-11 所 示 。 
开始 点 (20,20) 结束 点 (200,20) 





控制 点 (20,100) 
14-11 二 次 方 贝 塞 尔 曲线 控制 示意 图 


从 二 次 方 贝 塞 尔 曲线 的 名 称 可 以 联想 还 有 三 次 方 、 四 次 方 贝 塞 尔 曲线 ， 常 用 的 是 三 次 方 


贝 塞 尔 曲线 bezierCurveTo(p1x,ply,p2x,p2yx,y)。 它 多 增加 了 一 个 控制 点 ， 使 曲线 更 加 曲折 平 
滑 ， 如 图 14-12 所 示 。 


开始 点 (20,20) 结束 点 (200,20) 
| . 
控制 点 1 (20,100) 控制 点 2 (200, 100) 


14-12 三 次 方 贝 塞 尔 曲线 控制 示意 图 


三 次 方 贝 塞 尔 曲线 需要 3 个 点 。 前 两 个 点 是 用 于 三 次 方 贝 塞 尔 计 算 中 的 控制 点 ， 第 三 个 
点 是 曲线 的 结束 点 。 曲 线 的 开始 点 是 当前 路 径 中 最 后 一 个 点 。 如 果 路 径 不 存在 ， 同 样 可 使 用 
beginPath() 和 moveTo() 方 法 来 定义 开始 点 。 

在 Photoshop 和 一 些 矢量 图 软件 中 ， 通 常 使 用 鼠标 去 拖 动 控制 点 、 开 始点 和 结束 点 来 调 
整 曲线 以 达到 需求 目的 。 



































14.2.6 绘制 文本 (fillText) 和 strokeText 


CSS3 对 文本 的 控制 是 非常 简洁 和 灵活 的 ，Canvas 同样 也 提供 了 图 形 处 理 中 必 不 可 少 的 
文字 《文字 也 是 一 种 特殊 的 图 案 ) 处 理 接口 。 

绘制 文本 和 绘制 路 径 类 似 ， 有 填充 绘制 文本 方式 fnlText 和 非 填充 绘制 文本 方式 
strokeText， 参 数 相同 ， 第 一 个 是 需要 的 字符 串 ， 后 面 的 则 是 起 点 坐标 ， 从 图 14-13 可 以 看 出 
它们 之 间 的 区 别 。 
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Hello HTMLS,Javascript,Z3F 


Hello HTMLS,Javascript,Z3F 
图 14-13 绘制 文本 的 两 种 方式 
实现 图 14-13 效果 的 代码 如 下 : 


dw.font="20px Verdana"; 
dw.fillText ("Hello HTMLS5,Javascript,23F",10,50); 
dw.strokeText ("Hello HTMLS5,Javascript,23F",10,90); 


表 14-5 列举 了 文本 绘制 相关 的 属性 和 方法 。 
表 14-5 绘制 文本 相关 属性 和 方法 


属性 方法 


设置 或 返回 文本 内 容 的 当前 字体 属性 
设置 或 返回 文本 内 容 的 当前 对 齐 方式 
设置 或 返回 在 绘制 文本 时 使 用 的 当前 文本 基线 





返回 对 
fillTextO) 在 画布 上 绘制 “被 填充 的 ”文本 
在 画布 上 绘制 文本 无 填充 ) 





14.3 颜色 、 风 格 和 阴影 


只 绘制 线条 和 文字 恐怕 不 能 满足 实际 的 项 目 需求 ，HTML5 为 此 还 提供 了 画笔 颜色 、 浙 
变 、 阴 影 等 工具 。 


14.3.1 线性 渐变 (createLinearGradient) 


在 第 10 章 介绍 过 CSS3 的 线性 渐变 linear-gradient， 而 Canvas 中 也 存在 线性 渐变 。 技 术 
总 是 惊人 的 相似 ， 只 有 语法 或 者 风格 上 的 差异 。 例 如 ， 由 一 种 颜色 渐变 到 另 一 种 颜色 ， 
Canvas 中 实现 代码 如 下 : 


Var grd=dw.createLinearGradient (0,0,170,0); 
grd.addColorStop (0, "black"); 
grd.addColorStop (1, "white"); 
dw.fillstyle=grd; 

Gw.fillRect (20,20,150,100); 


231 


createLinearGradient 的 4 个 参数 是 两 组 坐标 值 ，CSS3 的 linear-gradient 也 有 “to right” 这 
样 类 似 的 值 。 图 14-14 就 是 这 个 简单 的 黑白 色 渐变 效果 。 








图 14-14 线性 渐变 


由 于 线性 渐变 可 能 是 非 水 平 或 垂直 的 ，linear-gradient 还 要 接收 10deg 这 样 的 角度 值 ， 而 
createLinearGradient 则 不 用 ， 因 为 两 个 点 组 成 的 线 本 身 就 带 有 角度 ， 对 于 颜色 和 距离 ， 
Canvas 需要 用 addColorStop 额外 来 添加 ， 虽 然 没有 CSS3 提供 的 方式 简洁 ， 但 更 适合 程序 动 
态 处 理 ， 请 通过 下 面 的 代码 来 理解 多 渐变 色 及 角度 渐变 : 


Var grd=dw.createLinearGradient (0,60,120,0) 
grd.addColorStop (0, "black") 
grd.addColorStop("0.3","magenta"); 
grd.addColorStop("0.5","blue"); 
grd.addColorStop("0.6","green"); 
grd.addColorstop("0.8","yellow"); 
grd.addColorSstop (1, "white"); 
dw.fillSstyle=grd; 
dw.fillRect (20,20,150,100); 


代码 变化 并 不 大 ， 只 是 坐标 参数 的 改变 导致 角度 的 变化 ， 多 次 调用 addColorStop 设置 更 
多 渐变 色 ， 效 果 如 图 14-15 所 示 。 





图 14-15 角度 渐变 和 增加 渐变 色 
相关 参数 说 明 请 参考 表 14-6。 
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表 14-6 线性 渐变 相关 方法 及 说 明 


他 如 线性 的 渐变 对 象 ， 震 要 两 组 村 


规定 gradient 对 象 中 的 颜色 和 位 置 


addColorStop(stop,color) stop 介 于 0.0 与 1.0 之 间 ， 表 示 渐 变 中 开始 与 结束 之 间 的 位 置 


color 为 在 结束 位 置 显示 的 CSS 颜色 值 





创建 放射 状 /环形 的 渐变 


createRadialGradient(xl,yl:rl,x2,y2xr2) | 前 3 个 参数 设置 开始 圆 (内 圆 ) ， 后 3 个 参数 则 设置 结束 圆 








〈 外 圆 ) 











14.3.2 放射 渐变 (createRadialGradient) 


放射 渐变 和 线性 渐变 使 用 起 来 很 相似 ， 都 需要 用 addColorStop 方法 来 控制 渐变 位 置 和 颜 
色 ， 只 是 多 了 两 个 参数 ， 以 设置 圆 的 半径 值 ， 先 看 看 如 图 14-16 所 示 的 效果 。 





图 14-16 放射 渐变 效果 图 


绘制 效果 图 的 代码 如 下 : 


var grd=dw.createRadialGradient (10,10,5,90,60,100); 


grd. 
.addColorStop ("0.3","magenta"); 
.addColorStop("0.5","blue"); 
.addColorStop("0.6","green"); 
grd. 
grd, 


addColorStopP (0,"black"); 


addColorStop("0.8","yellow"); 
addColorStop (1, "white") 7 


dw.fillStyle=grd; 
dw.fillRect (20,20,150,100); 


将 createRadialGradient 的 构造 参数 修改 成 createRadialGradient(95,65,5,95,65,100)， 其 他 
代码 不 变 ， 则 放射 的 位 置 就 发 生 了 变化 ， 如 图 14-16 右 侧 效果 所 示 。 
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14.3.3 阴影 


阴影 在 CSS3 中 很 常用 ， 在 Canvas 中 也 是 必 不 可 少 的 ， 控 制 阴影 的 几 个 属性 也 相对 简 
单 ， 如 表 14-7 所 示 。 


表 14-7 阴影 相关 属性 说 明 


























属性 说 明 

shadowColor 设置 或 返回 用 于 阴影 的 颜色 

shadowBlur | 设置 或 返回 用 于 阴影 的 模糊 级 别 

shadowOffsetX | 设置 或 返回 阴影 距 形状 的 水 平 距离 ， 可 以 是 负数 
shadowOffsetY | 设置 或 返回 阴影 距 形状 的 垂直 距离 ， 可 以 是 负数 





下 面 就 简单 演示 一 下 如 何 设置 阴影 ， 请 看 如 下 代码 : 


dw.shadowColor="black"; 
dw.fillSstyle="blue"; 
dw.shadowBlur=1; 

dw.fillRect (20,20,100,80); 
dw.shadowBlur=10; 
dw.fillRect (20,120,100,80); 
dw.shadowOffsetX=10; 
dw.fillRect (220,20,100,80); 
dw.shadowOffsetY=10; 
dw.fillRect (220,120,100,80); 


在 以 上 代码 中 shadowColor 和 fillStyle 作为 通用 样式 只 出 现 一 次 《实际 项 目 中 可 能 多 次 出 
现 ) ， 后 面 分 别 绘制 4 个 矩形 并 进行 调整 以 区 别 阴影 的 不 同 效果 ， 如 图 14-17 所 示 。 


图 14-17 阴影 效果 
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14.4 再 画 一 个 哆 啦 A 梦 


在 第 10 章 中 曾 用 CSS3 绘制 过 一 个 卡通 形象 一 一 哆 啦 A 梦 ，Canvas 是 HTML5 提供 的 绘 
图 功能 ， 所 以 它 也 能 够 完成 CSS3 做 的 事情 ， 相 比 而 言 ，Canvas 用 到 的 HTML 标签 更 少 。 图 
14-18 就 是 使 用 Canvas 绘制 的 哆 啦 A 梦 的 头像 步骤 图 。 


@OO 


14-18 Canvas 绘 制 的 哆 啦 A 梦 头像 


14.4.1 准备 工作 
因为 HTML5 支持 Canvas， 所 以 文档 头 的 标记 应 该 是 : 
<!DOCTYPE HTML5> 
在 <body> 标 签 中 需要 一 个 canvas 标签 : 


<div id="doraemon"> 
<canvas class="face" width="600" height="800"> 您 的 浏览 器 不 支持 canvas。 
</canvas> 

</div> 


无 须 多 余 的 CSS 样式 代码 即 可 在 <script> 标 签 中 用 JavaScript 进行 绘制 ， 首 先 还 是 要 用 
getContext 方 法 获取 canvas 对 象 : 


Var face = document .querySelector ("#doraemon .face") .getContext ("2d"); 


14.4.2 绘制 头 和 脸 


由 于 这 个 卡通 形象 的 头 正 好 是 圆 形 ， 所 以 用 arc 方法 就 可 以 绘制 出 头 的 路 径 ， 然 后 
fillStyle 填充 色 设置 为 蓝 色 #07BEEA， 先 填充 ， 再 绘制 头像 的 轮廓 ，stroke 一 下 即 可 完成 对 轮 
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廓 的 绘制 而 共用 同一 个 arc 绘制 出 的 路 径 ， 具 体 代 码 如 下 : 


face.arc(252, 252, 250, 0, 360 * Math.PI / 180) 


14 
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face.fillStyle = "#07BEEA"; 
face.fill(); 

face.lineWidth = 2; 
face.strokeStyle = "#333"; 
face.stroke(); 


// 画 圆 
// 填 充 色 
// 填 充 


// 画 笔 色 
// 画 轮廓 线 


而 白色 大 脸 不 是 标准 的 圆 形 ， 所 以 脸 的 轮廓 就 要 用 到 贝 塞 尔 曲线 ， 请 看 如 下 代码 ; 


face.beginPath () 7 
face.moveTo (160，450) 


face.bezierCurveTo(0, 400, 0, 110, 210, 115); 


face.lineTo(290, 115); 
face.bezierCurveTo(500, 110, 500, 400, 340, 
face.bezierCurveTo(280, 470, 220, 470, 160, 
face.fillStyle = "#FFF"; 

face.fill(); 

face.stroke(); 


.4.3 绘制 眼睛 和 鼻子 


450) 
450) 7 


// 重 置 当 前 绘画 路 径 
// 画 笔 移 动 

/ 写 仿 J 放 城 (6D 
// 上 边 

/ 写 仿 史记 城 ( 轨 
/ 写 仿 刚才 CT 园 
// 填 充 色 

// 填 充 

// 画 


哆 啦 A 梦 的 眼睛 也 不 是 标准 圆 ， 所 以 依然 要 用 贝 塞 尔 曲线 才能 完成 ， 请 看 绘制 眼眶 的 代码 ; 


face.beginPath () ?7 
face.moveTo (150，150) 7 
face.lineTo(150, 100); 


face.bezierCurveTo(160, 50, 240, 50, 250, 100); 


face.lineTo(250, 150); 
face.bezierCurveTo(240, 200, 160, 200, 150, 
face.moveTo(250, 150); 
face.lineTo(250, 100); 


150); 


face.bezierCurveTo(260, 50, 340, 50, 350, 100); 


face.lineTo(350, 150); 
face.bezierCurveTo(340, 200, 260, 200, 250, 
face.fillStyle = "#FFF"; 

face.fill(); 

face.stroke(); 


黑色 的 眼睛 是 两 个 圆 形 ， 还 需要 填充 : 





face.beginPath(); 


150); 


face.arc(225, 155, 10, 0, 360 * Math.PI / 180); 
face.arc(275, 155, 10, 0, 360 * Math.PI / 180); 


face.fil1Style = "#333"; 


// 重 置 当前 绘画 路 径 
// 画 笔 移动 
// 左 眼 左 竖 线 
// 左 下 眼 瞪 
// 左 眼 右 竖 线 
// 左 上 眼 瞪 
// 画 笔 移动 
// 右 眼 左 竖 线 
// 右 上 眼 瞪 
// 右 眼 右 竖 线 
// 右 下 眼 瞪 
// 填 充 色 

// 填 充 

// 画 


// 重 置 当 前 绘画 路 径 


// 填 充 色 


face.fill(); 


// 填 充 


鼻子 也 是 一 个 圆 ， 只 是 上 面 有 高 光 ， 高 光 实质 上 就 是 一 个 放射 性 填充 的 贺 ， 具 体 请 看 如 


下 代码 : 


// 绘 制 鼻子 
face.beginPath() 7 
faco. arc(250; 197, 25; 
.fillstyle = 
face.fill(); 
face.stroke(); 
beginPath(); 
arc(260, 190, 


0, 360 * Math.PI 


face "#C93E00"™; 


face. 


face. 10, 0, 360 * Math.PI 


var grd = face.createRadialGradient (260, 


grd.addColorStop (0, "#FFF"); 
grd.addColorStop (1,"#C93E00"); 
face.fil1Style = 
face.fill(); 


grd; 


14.4.4 绘制 嘴巴 和 胡须 
接 下 来 绘制 嘴巴 和 胡须 ， 胡 须 就 是 


// 绘 制 嘴巴 
face.beginPath(); 
moveTo (250, 222); 
lineTo(250, 395); 
320)3 
bezierCurveTo(180, 
lineWwidth = 3; 
face.stroke(); 
// 绘 制 胡子 
face.beginPath(); 
200); 
220); 
245); 
245); 
290); 
270); 
220); 
200); 
245); 
245); 
270); 


face. 
face. 
face.moveTo (100, 
face. 


face. 


a200320004208 


face.moveTo(80, 
lineTo(180, 
moveTo (80, 
lineTo(180, 
moveTo (80, 
lineTo(180, 
moveTo (320, 
lineTo(420, 
moveTo (320, 
lineTo(420, 
moveTo (320, 


face. 
face. 
face. 
face. 
face. 
face. 
face. 
face. 
face. 
face. 


// 重 置 当前 绘画 路 径 
VSON 
// 填 充 色 
// 填 充 
/ /绘制 鼻子 高 光 
// 重 置 当前 绘画 路 径 
/ 180); 


190,2,260,190,10); 
// 创 建 一 个 放射 渐变 样式 
// 由 内 到 外 的 颜色 
// 由 内 到 外 的 颜色 


// 填 充 


- 些 线条 ， 相 对 简单 ， 调 整 好 位 置 即 可 ， 具 体 代码 如 下 : 


// 重 置 当 前 绘画 路 径 


400, 320); 


// 重 置 当 前 绘画 路 径 
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face.lineTo(420, 290); 
face.stroke(); 


14.5 相关 参考 


e 一 个 基于 Canvas 的 创意 图 片 社区 一 一 https://blog.canv.as/。 
e UC 出 品 的 X-Canvas 引擎 一 一 http://bbs.uc.cn/forum.php?mod=viewthread & id=2146434。 
ee 贝 塞 尔 曲 线 原理 动画 一 一 https://zh.wikipedia.org/wiki/ 贝 益 曲 线 。 
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第 1S 音 Canvas 的 高 级 应 用 
一 一 制作 飞行 游戏 


只 有 当 人 充分 是 人 的 时 候 ， 他 才 游 戏 ; 只 有 当 人 游戏 的 时 候 ， 他 才 完 全 是 人 。 
一 一 约翰 。 克里斯托弗 。 弗 里 德里 希 。 汉 “。 席 勒 〈 德 国 诗人 ) 


通过 第 14 章 的 学 习 ， 已 经 能 够 利用 Canvas 完成 简单 的 、 基 础 的 几何 图 形 应 用 ， 但 是 
Canvas 不 仅仅 能 做 到 这 些 ， 还 有 非常 多 的 高 级 特性 ， 甚 至 能 够 把 Photoshop 搬 到 Web 上 来 。 
本 章 就 在 第 14 章 的 基础 上 再 介绍 一 些 Canvas 的 高 级 应 用 。 

本 章 主要 知识 点 : 


e 图 形 旋转 
e 图 形 合成 
e@ 纶 形 碰撞 检测 


15.1 转换 


现实 物体 的 复杂 程度 非常 高 ， 不 是 简单 几 个 矩形 、 圆 形 这 种 基础 图 形 就 能 描绘 出 来 的 ， 
正 因为 如 此 ，Canvas 提供 了 转换 功能 ， 从 字面 意思 上 理解 就 是 把 基础 图 形 转换 成 复杂 度 更 高 
的 图 形 ， 这 也 是 熟悉 Canvas 复杂 功能 不 可 忽略 的 部 分 。 
15.1.1 放大 和 缩小 

先 看 一 下 放大 在 Canvas 中 的 实现 ， 图 15-1 是 放大 一 个 矩形 的 前 后 效果 对 照 图 。 


全 


图 15-1 Canvas 放大 


图 15-1 的 实现 代码 如 下 : 


<canvas id="canvas" width="400" height="500"> 您 的 浏览 器 不 支持 canvas。</canvas> 
<script> 
var dw = document .querySelector ("#canvas") .getContext ("2d"); 


// 原 大 小 
dw.strokeRect (10,10, 40,20); 


// 放 大 
dw.scale (2,2); 
// 放 大 之 后 再 画 


dw.strokeRect (10,10,40,20); 
</script> 
所 谓 放 大 ， 一 般 指 大 小 是 原来 图 形 的 多 少 倍 ， 图 15-1 绘制 了 原 大 小 矩形 和 放大 之 后 的 矩 
形 ， 同 时 应 注意 它 的 坐标 位 置 也 被 放大 了 ， 这 种 策略 和 Photoshop 的 策略 不 同 ， 在 Photoshop 
中 ， 和 矩形 的 中 心 点 不 变 ， 左 右上 下 变化 ， 放 大 之 后 再 绘制 的 代码 其 实 相当 于 下 面 的 代码 : 


dw.strokeRect (20,20, 80, 40); 


方法 scale(scalewidth, scaleheight) 在 Canvas 中 主要 负责 放大 和 缩小 任务 ， 其 中 scalewidth 
参数 缩放 当前 绘图 的 宽度 ，1=100%，0.5=50%，2=200%， 其 他 值 以 此 类 推 ，scaleheight 参数 
缩放 当前 绘图 的 高 度 ， 其 值 参 考 前 者 。 

另外 需要 注意 的 是 ， 如 果 使 用 过 缩放 ， 那 么 之 后 所 有 的 绘图 也 会 被 缩放 ， 之 后 所 有 定位 
也 会 被 缩放 。 这 种 策略 下 ， 对 于 初学 者 来 说 很 容易 造成 逻辑 计算 的 混乱 ， 所 以 在 使 用 完 缩放 
后 应 将 其 恢复 过 来 ， 如 果 前 面 放 大 了 两 倍 ， 那 么 恢复 的 时 候 需 要 设置 为 scale(0.5,0.5)， 即 需 
要 缩小 一 半 ， 也 就 是 前 后 比率 乘积 等 于 1 (2*0.5=1) ， 而 不 能 直接 设置 为 scale(1,1)。 图 形 缩 
小 也 是 如 此 ， 有 具体 效果 请 读者 自行 实践 。 

除 放 大 和 缩小 功能 之 外 ，scale 也 能 实现 翻转 效果 ， 如 图 15-2 所 示 ， 载 入 一 张 外 部 的 图 片 ， 
当 加 载 完成 时 ， 先 正常 绘制 到 画布 上 ， 然 后 通过 scale 的 负数 设置 ， 就 可 以 绘制 出 翻转 效果 。 
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15-2 scale 可 使 图 形 翻转 
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图 15-2 的 实现 代码 如 下 : 


Var dw = 


var img = new Image(); 


img.src = "sanguo.jpg"; 


// 加 载 完 毕 之 后 
img.onload = function(){ 


dw.drawImage (img,0,0); 
dw.scale (1,-1); 


document .querySelector ("#canvas") .getContext ("2d"); 


dw.drawImage (img, 280,-360); 
} 


以 上 代码 中 用 到 了 drawImage() 方 法 ， 这 个 方法 的 具体 用 法 请 参考 第 16 章 的 相关 内 容 。 
15.1.2 平移 和 旋转 


平移 的 意思 就 是 位 置 移动 ， 或 X 轴 或 Y 轴 。 在 图 15-2 的 基础 上 ， 增 加 一 次 translate 平移 
操作 ， 效 果 如 图 15-3 所 示 ， 代 码 如 下 : 


var ctx = 


document .querySelector ("#canvas") .getContext ("2d"); 
ctx.strokeRect (10,10,550,20); 


ctx.translate(70,70); 
var img = new Image(); 
img.src = "sanguo.jpg"; 
img.onload = function(){ 
ctx.drawImage (img, 0,0); 
ctx.scale(-1,1); 


ctx.drawImage (img, -540,0); 
} 











图 15-3 translate 平移 操作 
为 了 对 照 坐 标 ， 在 平移 操作 前 绘制 了 一 个 矩形 ， 起 点 坐标 是 〈0,0) ， 通 过 translate 将 原 
点 位 置 移动 到 (70,70) ， 虽 然 用 drawImage 绘制 图 片 时 指定 的 坐标 也 是 〈0.0) ， 但 是 实际 上 
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并 未 重合 ， 这 就 是 平移 产生 的 效果 ， 平 移 的 原理 如 图 15-4 所 示 。 由 图 15-4 可 知 ， 平 移 对 以 
前 的 绘制 无 影响 。 











最 在 画布 
上 续 利 出 来。 
| EY 








15-4 translate 平移 分 析 图 


平移 translate 也 接收 负 值 ， 因 为 它 会 影响 后 面 所 有 的 操作 ， 负 数 相当 于 还 原 的 设置 ， 如 
果 没 有 ， 坐 标 换算 是 相当 烦琐 的 事情 。 
利用 rotate(radian) 方 法 可 以 实现 图 形 旋转 功能 ， 它 只 接收 参数 radian， 计 算 单位 是 弧度 ， 
这 一 点 和 CSS3 有 些 不 同 ， 所 以 在 实现 的 时 候 需要 计算 一 下 ， 请 看 如 下 示例 代码 : 
Var ctx = document .querySelector ("#Ccanvas") .getContext ("2d"); 
ctx.strokeRect (20,20,500,20); 
ctx.strokeStyle="#ccc"; 
ctx.rotate (30*Math.PI/180); 
ctx.strokeRect (20,20,500,20); 
代码 很 简单 ， 先 绘制 了 一 个 矩形 ， 然 后 设置 边线 颜色 ， 旋 转 30”， 通 过 30*Math.PI180 
转换 成 弧度 ， 然 后 再 用 相同 的 代码 绘制 ， 其 效果 如 图 15-5 所 示 ， 其 中 灰色 是 旋转 后 的 矩形 。 














15-5 旋转 功能 
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15.1.3 矩阵 转换 


前 面 介绍 的 缩放 、 平 移 和 旋转 都 有 不 同 的 调用 方法 ， 在 Canvas 内 部 ， 这 些 变形 转换 都 可 
以 通过 转换 矩阵 transform 来 实现 ， 其 语法 如 下 : 

ctx.transform(mll1,m1l2,m21,m22, dx, dy); 

该 方法 使 用 一 个 新 的 变换 矩阵 与 当前 变换 矩阵 进行 乘法 运算 ， 该 变换 矩阵 的 形式 如 图 
15-6 所 示 。 

例如 之 前 的 平移 操作 ， 实 际 上 的 原理 如 图 15-7 所 示 ， 将 旧 的 图 形 坐 标 x 和 y， 移 动 到 新 
坐标 x”′ 和 y'′， 那 么 新 坐标 位 置 则 是 : x' =x+dx, y' =ytdy。 








mll m21 dx B(x',y) 
new 
m2 m2 dy /一 y Am) 
| | ES 
0 0 1 9 » x ’ 
图 15-6 transform 参数 对 应 的 矩阵 图 15-7 平移 坐标 分 析 图 


这 个 计算 最 终 转 换 为 矩阵 ， 即 ctxtranslate(dx,dy) 可 以 被 蔡 换 成 ctx.transform 


(1,0,0,1,dx,dy)， 如 图 15-8 所 示 。 
同样 ， 对 于 缩放 scale(Sx，Sy) 也 是 可 以 用 矩阵 转换 的 ，Sx 和 sy 分 别 表示 在 x 轴 和 y 轴 上 


的 缩放 倍数 ， 如 图 15-9 所 示 。 

党 1 0 必 Tx ss 0 OV\fx 
时 0 1 外 中 和 
sly NO 0 1A1 1 oo 1hi 


图 15-8 平移 矩阵 图 15-9 缩放 矩阵 


~ 











缩放 前 后 只 是 倍率 的 不 同 ， 即 新 坐标 为 : x”=Sx*x，y”=Sy*y。 最 后 ctx.scale(Sx, Sy) 可 
以 用 ctx.transform (Sx,0,Sy,1,0,0) 来 蔡 换 。 而 rotate(@ 则 稍微 复杂 一 些 ， 如 图 15-10 所 示 。 





15-10 旋转 平面 分 析 图 
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在 图 15-10 中 ，B 点 是 通过 A 点 逆 时 针 旋 转 6 ”得 到 的 ， 因 为 A 点 坐标 为 : 


X=r*cosa 
y=r*sina 


所 以 B 点 坐标 为 : 


x'=r*cos (a+0) =x*cosO-y*sine 
y'=r*sin(a+0)=x*sinO+y*cosQl 


对 应 的 矩阵 如 图 15-11 所 示 。 


天 cos@ -sing 01fx 
y'|I=|sng cosg 0 + 
0 0 1 人 1 
15-11 旋转 和 矩阵 


也 就 是 说 ctxtransform(Math.cos(9*Math.PIU180),Math.sin(9*Math.PI180),-Math.sin(9* Math. 
PI180),Math.cos(0*Math.PI180),0,0) 可 以 替代 ctx.rotate(0)。 

读者 对 矩阵 不 清楚 也 没有 关系 ，Canvas 提供 的 基本 API 能 够 完成 很 多 应 用 效果 ， 这 不 会 
成 为 大 家 学 习 的 障碍 。 


15.2 合成 


如 果 说 转换 的 对 象 是 指 当前 对 象 ， 那 么 合成 的 对 象 就 是 多 个 不 同 对 象 ， 数 量 不 同 是 明显 
的 差别 。 就 像 Photoshop 中 图 层 的 概念 ， 前 者 只 操作 当前 图 层 ， 后 者 则 可 以 操作 多 个 图 层 。 


15.2.1 用 Photoshop 控制 图 形 合 


用 Photoshop 打开 任意 一 张 图 片 都 可 以 看 到 图 层面 板 ， 如 图 15-12 所 示 ， 其 中 被 框 住 的 下 
拉 列 表 中 有 多 种 图 层 合 成 选项 ， 比 如 当前 的 登 加 模式 。 








» 











Cc 区 
图 15-12 Photoshop 中 的 图 层 合成 选项 
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很 多 软件 都 有 图 层 的 概念 ， 而 每 一 个 图 层 实际 上 就 是 一 个 图 形 画 布 ， 相 当 于 一 个 
Canvas， 最 终生 产 的 图 片 就 可 能 是 多 个 图 层 合并 出 来 的 结果 。 





15.2.2 使 用 Canvas 控制 图 形 合 


在 Canvas 中 能 够 做 到 类 似 Photoshop 图 层 模式 控制 的 API 就 是 globalCompositeOperation 
属性 。 对 于 前 后 绘制 的 两 个 图 形 ， 默 认 情 况 下 如 图 15-13 左边 效果 所 示 ， 但 是 通过 
globalCompositeOperation 属性 可 以 设置 成 不 一 样 的 模式 。 


15-13 globalCompositeOperation 属性 改变 图 形 合成 模式 


绘制 图 15-13 的 代码 如 下 : 


<script> 
Var ctx = document .querySelector (“#canvas’”) .getContext (“2d’”); 


ctx.fillstyle=”red”; 

ctx.fillRect (20,20,75,50); 
ctx.globalCompositeOperation=”source-over’”; 
ctx.fillstyle=”blue”; 

ctx.fillRect (50,50,75,50); 


ctx.fillStyle=”red’”; 
ctx. filiRect (150,207757;50)3 
ctx.globalCompositeOperation=”destination-over”; 
ctx.fillstyle=”blue”; 
ctx.fillRect (180,50,75,50); 

</script> 


globalCompositeOperation 的 用 法 同 Canvas 其 他 属性 API 类 似 ， 且 会 影响 后 面 所 有 的 操 
作 ， 其 详细 设置 请 参考 表 15-1。 
表 15-1 globalCompositeOperation 属性 
值 效果 说 明 








SOurce-over 默认 ， 位 于 原 〈 旧 ) 图 形 之 上 
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( 续 表 ) 











Destination-over 


destination-atop 





值 效果 说 明 
在 原 〔 旧 ) 图像 顶部 显示 新 图 像 。 新 图 像 位 于 原 (IH) 
es 图 像 之 外 的 部 分 不 可 见 
| 在 原 〔 旧 ) 图 像 中 显示 新 图 像 。 只 有 原 〈 旧 ) 图 像 内 的 
ee 新 图 像 部 分 会 显示 ， 原 〔 旧 ) 图像 透明 
在 原 ( 旧 ) 图像 之 外 显示 新 图 像 。 只 会 显示 原 ( 旧 ) 图 
source-out 


像 之 外 新 图 像 部 分 ， 原 〈 旧 ) 图 像 透 明 


在 原 〈 旧 ) 图 像 下 显示 新 图 像 


在 原 〈 旧 ) 图 像 下 显示 新 图 像 ， 新 图 像 之 外 的 原 〈 旧 ) 
图 像 部 分 不 会 被 显示 





destination-in 


在 新 图 像 中 显示 原 〈 旧 ) 图 像 。 只 有 新 图 像 内 的 原 
( 旧 ) 图 像 部 分 会 被 显示 ， 原 〈 旧 ) 图 像 是 透明 的 





destination-out 








在 新 图 像 外 显示 原 〈 旧 ) 图 像 。 只 有 新 图 像 外 的 原 
〈 旧 ) 图 像 部 分 会 被 显示 ， 新 图 像 是 透明 的 
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( 续 表 ) 








lighter 显示 原 〈 旧 ) 图 像 + 新 图 像 


copy 侣 显示 新 图 像 ， 忽 略 原 〈 旧 ) 图 像 

















15.3 碰撞 检测 


在 很 多 游戏 中 都 有 碰撞 检测 ， 而 碰撞 检测 中 ， 最 简单 的 测试 就 是 矩形 碰撞 检测 ， 通 过 包 
装 它 能 实现 更 为 复杂 的 检测 ， 甚 至 在 3D 游戏 环境 中 也 能 实现 。 


15.3.1 圆 形 磁 撞 检测 


碰撞 检测 的 核心 就 是 检测 对 象 是 否 重 辣 ， 无 论 2D 还 是 3D 均 是 如 此 。 

圆 形 和 圆 形 的 碰撞 相对 来 说 是 2D 环境 中 最 简单 的 碰撞 ， 因 为 在 数学 中 对 于 两 个 圆 形 是 
否 重 站 有 现成 的 计算 公式 ， 就 是 计算 两 个 圆心 之 间 的 距离 公式 一 一 两 圆心 之 间 的 距离 是 否 小 
于 两 圆 的 半径 和 ， 如 图 15-14 所 示 。 


(9 大 
1 


Lal 





十 


h 1 
0 length < +r2 


图 15-14 圆 形 碰撞 检测 原理 


假设 圆 形 1 的 圆心 坐标 是 (x1,y1)， 半 径 是 rl ， 圆 形 2 的 圆心 坐标 是 (x2,y2)， 半 径 是 2， 
将 原理 转化 为 数学 公式 就 是 ，(x1-x2》+(y1-y2》<(r1+r2》。 在 开发 时 将 其 转化 为 代码 即 可 。 
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15.3.2 和 拢 形 碰撞 检测 


- 般 规 则 的 物体 碰撞 都 可 以 处 理 成 矩形 碰撞 ， 实 现 的 原理 同样 是 检测 两 个 矩形 是 否 重 
个 。 假 设 和 矩形 1 左上 角 的 坐标 是 (x1,y1)， 宽 度 是 w1， 高 度 是 hl; 矩形 2 左上 角 的 坐标 是 
(x2,y2)， 宽 度 是 w2， 高 度 是 h2， 如 图 15-15 所 示 。 


xlyl wi 


w2 


图 15-15 拢 形 碰撞 示意 图 
这 种 检测 示意 图 转换 成 数学 表达 式 就 是 : 
2 2 


其 中 x1+wl > x2 限定 第 一 个 矩形 的 右边 线 在 第 二 个 窍 形 的 左边 线 右边 ，xl < x2 + w2 限 
定 第 一 个 矩形 的 左边 线 在 第 二 个 矩形 的 右边 线 左 边 。 

这 样 下 来 ， 就 判定 两 个 矩形 在 X 方 向 上 的 相交 。 

同 理 ，yl + hl > y2 限定 第 一 个 矩形 的 下 边线 在 第 二 个 矩形 的 上 边线 下 面 ，y1 < y2 + h2 
限定 第 一 个 矩形 的 上 边线 在 第 二 个 矩形 的 下 边线 上 边 。 

这 样 下 来 ， 就 判定 两 个 矩形 在 立方 向 上 的 相交 。 

但 是 矩形 碰撞 只 是 一 种 比较 粗糙 的 碰撞 检测 方法 ， 因 为 很 多 实际 的 物体 可 能 不 是 一 个 规 
则 的 矩形 ， 比 如 入 体形 状 。 所 以 很 多 游戏 中 会 出 现 穿 墙 等 各 种 “穿越 ”， 这 些 都 是 碰撞 算法 
的 问题 。 正 因为 碰撞 检测 是 一 个 重要 的 复杂 问题 ， 所 以 很 多 游戏 引擎 专门 解决 过 这 些 问题 
实际 应 用 中 可 能 只 需要 调用 某 些 API 接 口 即 可 ， 而 无 须 重复 制造 轮子 。 


15.4 实现 打 飞 机 游戏 


游戏 是 交互 性 最 强 的 应 用 。 本 节 就 利用 Canvas 提供 的 一 些 主要 API 来 完成 一 个 热门 游戏 
应 用 一 一 打 飞 机 游戏 ， 从 中 体会 HTML5 游戏 开发 的 魅力 。 
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第 15 章 Canvas 的 高 级 应 用 一 一 制作 飞行 游戏 





15.4.1 打 飞 机 游戏 设计 


本 实例 最 终 的 效果 如 图 15-16 所 示 ， 借 鉴 微 信 打 飞机 游戏 的 一 些 思路 和 元 素 ， 将 其 移 至 
HTML5 的 Canvas 平台 下 。 





€ mm 二 -|[ 回 - 











图 15-16 打 飞 机 游戏 效果 图 


在 本 实例 中 只 实现 用 户 通过 键盘 左右 键 对 飞机 的 左右 移动 的 操控 以 及 子弹 和 敌 机 的 碰撞 
检测 等 游戏 核心 操作 的 实现 。 


15.4.2 移动 的 星空 


绝 大 多 数 游戏 都 有 一 个 游戏 场景 ， 华 美 绚丽 的 环境 甚至 是 其 成 功 的 一 大 因素 ， 一 般 来 说 
那些 装饰 性 的 环境 应 该 和 操作 对 象 相 分 离 ， 在 本 实例 中 ， 星 空 背景 就 只 是 一 个 装饰 性 的 东 
西 ， 但 是 有 了 这 个 简单 的 移动 星空 ， 就 能 使 人 感觉 真实 。 

<div style="position:relative;"> 

<canvas id="feiji" width="300" height="400"> 您 的 浏览 器 不 支持 canvas。 

</canvas> 

<canvas id="beijing" width="300" height="400"> 您 的 浏览 器 不 支持 canvas。 

</canvas> 

</div> 


以 上 代码 中 使 用 了 两 个 canvas， 将 背景 用 的 id 定义 为 beijing， 操 作 飞机 用 的 id 定义 为 
他 ii。 把 星空 背景 做 成 一 张 图 片 ， 让 图 片 街 接 自然 一 些 即 可 ， 然 后 用 CSS 引用 进来 ， 代 码 如 
下 : 
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#beijing{ 

position:absolute; 

background:url (beijing.jpg) ;z-index:1; 
} 


这 样 引用 的 jpg 背景 是 静态 的 ， 为 了 让 背景 从 上 往 下 动 起 来 ， 可 以 选择 用 CSS3 来 控制 ， 
这 也 是 讲 过 的 内 容 ， 具 体 代码 如 下 : 


#beijingf 
position:absolute; 
background:url (beijing.jpg) ;z-index:1; 
-webkit-animation-name: flymove; 
-webkit-animation-duration: 10s; 
-webkit-animation-timing-function: linear; 
-webkit-animation-iteration-count: 20000; 
-moz-animation-name: flymove; 
-moz-animation-duration: 10s; 
-moz-animation-timing-function: linear; 
-moz-animation-iteration-count: 20000; 
-ms-animation-name: flymove; 
-ms-animation-duration: 10s; 
-ms-animation-timing-function: linear; 
-ms-animation-iteration-count: 20000; 

/* 让 背景 星空 动 起 来 */ 

@-webkit-keyframes flymove{ 
0%{background-position:0 0;} 
100%{background-position:0 800px;} 

} 

@-moz-keyframes flymovel{ 
0%{background-position:0 0;} 
100%{background-position:0 800px;} 

} 

@-ms-keyframes flymove{ 
0%{background-position:0 0;} 
100%{background-position:0 800px;} 

} 


对 于 animation 这 些 CSS3 属性 ， 具 体 可 参考 第 10 章 和 第 11 章 的 内 容 。 对 于 飞机 层 也 要 
定位 一 下 ， 背 景 层 设置 z-index 为 1， 则 飞机 层 设 置 z-index 为 2: 


#beijing,#feiji{position:absolute;} 
#feiji{top:0;left:0;z-index:2;} 
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15.4.3 加 载 资 源 


在 游戏 里 都 有 很 多 资源 ， 不 可 能 用 Canvas 来 一 一 绘制 ， 都 是 其 他 专业 人 员 做 好 的 图 片 声 


音 等 ， 所 以 在 大 多 数 游戏 里 都 有 一 个 游戏 资源 加 载 的 过 程 ， 如 【范例 15-1】 所 示 。 


ownamwmewnP 


ND DDD 
DPoO 


DDD 
ao 


PRPPFP PR PR PP 
ownamumwwNbh 


ID 
0 


【范例 15-1 加 载 游戏 资源 】 
<script> 
var fjmap = document .querySelector ("#feiji") .getContext ("2d"); 
(function(){ 


var loaded = 0; 


Var jpg — {ls // 存 储 资 源 
Var bullets = {}; 
var enemys = {}; 


function load(pic,callback){ 
Var img = new Image() 
img.src = pic; 
img.onload=function(){ 
loaded++; 
jpg [pic]=img; 
callback (); 
] 7 
} 


load("self.png",init); // 我 方 战机 
load ("enemy.png",init); // 敌 机 
function init(){ 
if (loaded==2) { // 资 源 总 数 , 资源 加 载 完毕 后 执行 
// 这 里 就 是 资源 加 载 完成 要 做 的 事情 
}else{ 


// 这 里 可 以 做 一 些 loading 之 类 的 事情 
} 
下 


}) () ;// 闭 包 结束 


</script> 


这 个 资源 加 载 非 常 简单 ， 使 用 闭 包 将 大 部 分 代码 包装 起 来 ， 这 样 避免 了 变量 污染 ， 闭 包 


中 的 load 方法 主要 处 理 资 源 的 加 载 〈 这 里 主要 是 图 片 ， 具 体 项 目 可 能 更 复杂 ) ， 加 载 成 功 后 
就 执行 初始 化 init 方法 ， 通 过 让 判断 ， 可 以 区 分 加 载 完成 做 什么 ， 加 载 示 完成 做 什么 ， 比 如 
loading 进度 条 都 可 以 在 未 完成 的 状态 下 处 理 。 


15.4.4 我 方 战机 、 敌 机 和 子弹 


把 这 个 游戏 简单 化 之 后 就 剩 下 3 个 对 象 ， 分 别 是 我 方 战机 、 敌 机 和 子弹 。【 范 例 15- 
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2】、【 范 例 15-3】 和 【范例 15-4】 分 别 是 它们 的 实现 代码 。 
范例 15-2 我 方 战机 对 象 的 实现 】 


1. function fighter(){ 

25 this.x = 130 

世 江 this.y = 350 

4. this.w = jpg["self.png"] .width 

放 this.h = jpg["self.png"] .height 

6 var rs = this; 

Me fjmap .drawImage (jpg["self.png"],this.x,this.y); 
8. window.addEventListener('keydown', function(e){ 
9 。 if(e.keyCode == 37){ 

05 rs.left(); 

1 }elsef{ 

2 rs.right (); 

5 } 

和 }, true); 

| 

16. fighter.prototype.move = function(x){ 

Ls fjmap.clearRect (this.x,this.y,this.w,this.y); 
18. fjmap.drawImage (jpg["self.png"] ,this.x+=x,this.y); 
| 

20. // 向 左 移动 


21. fighter.prototype.left = function(){ 
2 this.move(-4); 

230 |} 

24. // 向 右 移动 

25. fighter.prototype.right = function(){ 
26. this.move(4) 7 

2 


在 【范例 15-2】 中 ， 我 方 战机 默认 监控 键盘 事件 ， 键 盘 上 的 左右 移动 键 会 分 别 控制 我 方 
战机 的 左右 移动 (还 可 以 扩展 成 上 下 移动 》。 


【范例 15-3 敌 机 对 象 的 实现 】 


1. function enemy(){ 

2。 this.w = jpg["enemy.png"] .width 

开明 this.h = jpg["enemy.png"] .height 

4. this.x = parseInt (Math.random()*(300-this.w)); 

Se this.y = 0; 

6. Var rs = this; 

和 fjmap.drawImage (jpg["enemy.png"],this.x,this.y); // 显 示 敌 机 
8. this.timer = setIinterval (function(){ 

5 if(rs.y>400){ 

9 rs.stop(); 
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return; 
} 
rs.clear(); // 旧 飞机 位 置 
fjmap .drawImage (jpg["enemy.png"],rs.x,rs.y+=3); 
},20) 
下 
// 擦 除 敌 机 


enemy.prototype.clear = function(){ 
fjmap.clearRect (this.x,this.y,this.w,this.h); 
} 
enemy.prototype.stop = function(){ 
clearInterval (this.timer) 
enemys [this.name]=null; 
delete enemys[this.name]; 
1 


敌 机 不 受用 户 控 制 ， 会 随机 从 顶部 出 现 ，【 范 例 15-3】 中 用 Math.random() 方 法 产生 一 个 


随机 的 x 坐标 ， 同 时 它 会 自动 飞行 ， 所 以 用 setInterval 方法 定时 器 让 敌 机 向 下 飞 过 来 ， 另 外 
还 提供 了 stop0 方 法 ， 用 于 敌 机 被 子弹 打 中 或 飞 出 可 视 区 域 后 自动 销毁 的 一 系列 操作 。 


3 


【范例 15-4 子弹 对 象 的 实现 】 


function bullet (x,y){ 
this,x = x; 
this.y = y; 
// 接 受 一 个 x,y 发 射 点 坐标 
var rs = this; 
this.timer = setInterval (function(){ 
if(rs.y<0){ 
rs.stop(); 
enemys [rs.name]=nul17 
return; 
} 
rs.fly(); 
},100); 
fjmap. fillStyle="#0000ff"; 
fjmap.fillRect (x,y,2,4); 


2 
. bullet.prototype.stop = function(){ 


ClearInterval (this.timer); 
bullets [this.name]=nul17 


Sy 
. bullet.prototype.fly = function(){ 


this.check(); // 碰 撞 检 测 
fjmap.clearRect (this.x,this.y,2,4); // 擦 除 旧 子 弹 
fjmap.fillRect (this.x,this.y-=50,2,4); // 绘 制 新 子弹 
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ZO] 

26. bullet.prototype.check = function(){ 
a War Xl = this.xy 

8 var yl = this.y; 

296 var wl = 2,hl = 4; 


305 forl(var em in enemys){ 

ch var e = enemys[em]; 

2 if(!e) continue; 

33。 Var x2 = e.xX,y2=e.y,w2=e.w,h2=e.h; 

34. TL 2 hl yl yt ht 
5 enemys [e.name] .clear (); 

6 enemys [e.name] .stop(); 

3 } 

3 } 

a 


子弹 和 敌 机 有 点 类 似 ， 也 用 了 setInterval 来 控制 飞行 ， 同 时 子弹 还 有 一 个 任务 就 是 检测 
是 否 打 中 了 敌 机 ， 也 就 是 碰撞 检测 ， 可 能 这 个 碰撞 检测 的 效率 不 是 最 高 的 ， 只 是 基本 说 明了 
碰撞 检测 的 思路 ， 打 中 敌 机 之 后 就 调用 敌 机 的 销毁 方法 还 可 以 扩展 成 华丽 的 爆炸 动画 〉。 





15.4.5 让 游戏 动 起 来 


场景 准备 好 了 ， 资 源 准备 好 了 ， 对 象 准备 好 了 ， 现 在 需要 做 的 就 是 整合 ， 这 个 整合 点 就 
是 初始 化 方法 init， 整 合 的 内 容 就 是 要 有 己方 的 飞机 出 现 、 子 弹 发 射 、 敌 机 出 现 等 任务 。 请 
看 【范例 15-5】 中 的 代码 。 


【范例 15-5 让 游戏 动 起 来 】 


让 function init(){ 

2 if (loaded==2) { // 资 源 总 数 ,资源 加 载 完毕 后 执行 
a // 我 方 战机 

4. Var myfig = new fighter(); 

5 // 持 续 出 现 敌 机 

Ge setInterval (function(){ 

var n = Math.random(); 

8 enemys [n] = new enemy(); 

9。 enemys [n] .name = n; 

10. },500) 

LR // 持 续 发 射 子弹 

和 2 setInterval (function(){ 

13s var n = Math.random(); 

Lae bullets[n]=new bullet (myfig.x+20,myfig.y-10); 
15. bullets [n] .name = n; 

6, },200); 
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jelsef 

18. // 这 里 可 以 做 一 些 loading 之 类 的 事情 
19. li 

这 人 


因为 敌 机 是 持续 出 现 的 ， 所 以 用 setInterval 方法 不 断 产 生 敌 机 ， 子 弹 的 位 置 是 基于 我 方 
战机 所 在 位 置 的 ， 所 以 用 setInterval 产生 的 子弹 需要 接受 一 个 坐标 参数 。 

到 这 里 打 飞 机 游戏 基本 完成 ， 可 以 用 键盘 操作 飞机 来 瞄准 敌 机 以 消灭 它 ， 而 一 款 商业 性 
质 的 游戏 ， 还 需要 很 多 内 容 ， 比 如 计 分 、 关 卡 等 。 


15.5 相关 参考 


ee Canvas 版 的 Photoshop 一 一 https://muro.deviantart.com/。 
ee 如 何在 Canvas 与 SVG 之 间 进行 选择 一 一 https://msdn.microsoft.com/zh- 
cmlibrary/gg193983 。 
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第 16 但 Canvas 的 另类 应 用 
一 一 压缩 和 解压 


哲学 家 也 要 学 数学 ， 因 为 他 必须 跳出 浩如烟海 的 万 变现 象 而 抓 住 真正 的 实质 …… 又 因为 
这 是 使 灵魂 过 渡 到 真理 和 永存 的 捷径 。 


压缩 是 指 在 不 丢失 信息 的 前 提 下 ， 按 照 一 定 的 算法 对 数据 进行 重新 组 织 ， 以 减少 数据 宛 
余 和 存储 空间 的 一 种 方法 ， 而 算法 就 是 压缩 和 解压 的 桥梁 。 

本 章 主 要 知识 点 : 

e 绘制 图 片 


@ Canvas 图 像 像素 值 格式 
。 RGBA 像素 操作 





16.1 绘制 图 片 


在 第 15 章 中 用 到 过 绘制 图 片 的 功能 来 加 载 游戏 资源 ， 在 这 里 就 具体 介绍 绘制 图 片 功能 的 
详细 用 法 ， 在 Canvas 中 主要 是 用 drawImage() 方 法 来 完成 任务 ， 它 能 够 在 画布 上 绘制 图 像 ， 
也 能 够 绘制 图 像 的 某 些 部 分 ， 以 及 增加 或 减少 图 像 的 尺寸 。drawImage() 方 法 有 9 个 参数 





drawImage (img, sx, sy, swidth, sheight,x,y,width,height); 
这 些 参数 的 具体 说 明 如 表 16-1 所 示 。 
表 16-1 drawlmage 方法 的 参数 




















参数 说 明 

img 规定 要 使 用 的 图 像 、 画 布 或 视频 
x 在 画布 上 放置 图 像 的 x 坐标 位 置 
y 在 画布 上 放置 图 像 的 y 坐标 位 置 





( 续 表 ) 























参数 
选 ， 开 始 前 切 的 x 坐标 位 置 

sy 选 ， 开 始 剪 切 的 y 坐标 位 置 

swidth 选 ， 被 剪 切 图 像 的 宽度 

sheight 选 ， 被 剪 切 图 像 的 高 度 

width 选 ， 要 使 用 的 图 像 的 宽度 《伸展 或 缩小 图 像 ) 
height | 可 选 ， 要 使 用 的 图 像 的 高 度 《 伸 展 或 缩小 图 像 ) 





16.1.1 绘制 外 部 载 入 的 图 片 


这 个 方法 最 少 使 用 含有 3 个 参数 的 drawImage(img,x,y)， 第 15 章 已 有 介绍 ， 这 里 就 不 再 
缆 述 。drawImage 还 有 两 种 使 用 方式 ， 分 别 是 使 用 5 个 参数 和 9 个 参数 的 情况 。 

例如 5 个 参数 是 使 用 drawImage(img,x,y,width,height)，x 和 y 依然 是 开始 绘制 的 坐标 ， 
drawImage 会 按照 提供 的 width 和 height 对 图 形 进行 拉 伸 《如果 尺寸 比 原 图 大 ) 、 缩 小 〈 如 果 
尺寸 比 原 图 小 ) 和 变形 (如 果 尺 寸 和 原 图 不 成 比例 ) ， 效 果 如 图 16-1 所 示 ， 代 码 请 看 【范例 
16-1] 。 

当 使 用 全 部 参数 也 就 是 9 个 参数 的 时 候 ， 基 本 上 用 于 剪 切 图 片 ， 请 直接 看 如 图 16-1 所 示 
的 效果 ， 代 码 请 看 【范例 16-1】。 





) 历史 加 书签 胃 工具 四 避 助 t 
I 到 











图 16-1 对 图 片 的 绘制 操作 


【范例 16-1 对 图 片 的 绘制 操作 】 


Rs <img src="caodi.jpg" id="tu" width="275" align="left"/> 
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2 <canvas id="canvas" width="300" height="420"> 您 的 浏览 器 不 支持 canvas 。 


</canvas> 
交 <script> 
4. Var dw = document .querySelector ("#canvas") .getContext ("2d"); 
5 Var img=document .getElementById ("tu"); 
6. // 原 图 绘制 ，drawImage (img, xvy) 
Ts dw.drawImage (img, 5,5); 
8. // 变 形 绘制 ，drawImage (img, x,y,width,height) 
9。 dw.drawImage (img,5,165,200,112); 
0 dw.drawImage (img, 210,165,70,40); 
ol dw.drawImage (img, 210,210,70,80); 
2 // 前 切 绘制 ，drawImage (img, sx, sy, swidth, sheight,x,y,width,height) 
3 dw.drawImage (img,100,0,150,100,5,300,150,100); 
14. dw.drawImage (img, 200,0,75,100,205,300,75,100); 
5 </script> 


【范例 16-1】 中 第 7 行 代码 绘制 出 图 16-1 中 的 中， 第 9~12 行 分 别 对 应 图 16-1 中 的 @ 到 
@@， 第 13、14 行 对 应 @ 和 @。 


16.1.2 Canvas 给 视频 加 字幕 

Canvas 提供 的 另 一 强大 功能 就 是 获取 播放 中 的 视频 图 形 ， 这 样 的 功能 能 够 让 开发 人 员 做 
很 多 事情 ， 比 如 截图 、 添 加 动态 字幕 等 ， 代 码 也 不 是 很 复杂 ， 请 看 【范例 16-2】。 

【范例 16-2 绘制 播放 视频 】 


由 s <video width="300" controls="" id="vd" style="float:left"> 





2 <source src="../09/iceage4.ogv"></source> 

3. </video> 

着 <canvas id="canvas" width="300" height="128"> 您 的 浏览 器 不 支持 canvas 。 
</canvas> 

5。 <script> 

6 var dw = document .querySelector("#canvas") .getContext ("2d"); 

De Var v=document .getElementById ("vd"); 

用 Var Timer=null; 

9- Vv.addEventListener('play', function() { 

LO Timer = window.setInterval (function(){ 

i dw.drawImage (v, 0,0,300,128); 

2 dw.font="30px Verdana"; 

ES dw.fillText ("三 封 字幕 组 ", 10, 50); 

14. },125);» 

5 },false); 

6 v.addEventListener('pause',function() { 

ds window.clearIinterval (Timer); 

1 },false); 
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19。 Vv.addEventListener('ended',function() { 


有 805 ClearInterval (Timer); 
2 },false); 
2 </script> 


范例 效果 如 图 16-2 所 示 ， 在 播放 的 时 候 同时 用 drawImage 方法 绘制 ， 可 以 使 用 所 有 
Canvas 对 象 对 视频 数据 进行 操作 ， 相 当 便利 。 





[Deens 圈 











图 16-2 Canvas 给 视频 加 字幕 


16.2 像素 级 操作 


图 形 都 是 由 无 数 像素 点 拼装 而 成 的 ， 在 Canvas 中 ， 每 一 个 像素 都 存在 着 4 个 方面 的 信 
即 RGBA 值 : 


汪 


ee R: 红色 (0~255) 
e G: 绿色 (0~255) 
e B: 蓝 色 (0~255) 
@ A: alpha 通 道 (0~255，0 是 透明 的 ，255 是 完全 可 见 的 ) 


所 谓 像素 级 操作 就 是 对 这 些 点 ， 即 这 些 像素 信息 RGBA 值 进行 操作 处 理 。 获 取 图 形 的 像 
素数 据 需要 用 到 getImageData() 方 法 ， 其 具体 参数 请 看 表 16-2。 


表 16-2 getlmageData 方法 参数 




















参数 说 明 
开始 复制 的 左上 角 位 置 的 x 坐标 
y | 开始 复制 的 左上 角 位 置 的 y 举 标 
width | 将 要 复制 的 矩形 区 域 的 宽度 
height | 将 要 复制 的 矩形 区 域 的 高 度 
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16.2.1 反 转 颜色 一 一 底片 效果 


选取 一 张 尺寸 合适 的 图 片 ， 可 以 用 <img> 标 签 加 载 ， 也 可 以 用 JavaScript 动态 创建 ， 然 后 
用 getImageData() 方 法 获取 图 片 像素 数据 ， 处 理 之 后 用 putImageData() 方 法 〈 具 体 参 数 请 看 表 
16-3) 把 像素 数据 写 到 画布 上 。 实 现代 码 请 看 【范例 16-3】。 


表 16-3 putlmageData 方法 参数 























参数 说 明 

imgData 规定 要 放 回 画布 的 ImageData 对 象 

革 ImageData 对 和 象 左上 角 的 x 坐标 ， 以 像素 计 

y ImageData 对 象 左上 角 的 y 坐标 ， 以 像素 计 

dirtyX 可 选 ， 水 平 值 (x) ， 以 像素 计 ， 在 画布 上 放置 图 像 的 位 置 
dirtyY 可 选 ， 水 平 值 (y) ， 以 像素 计 ， 在 画布 上 放置 图 像 的 位 置 
width 可 选 ， 在 画布 上 绘制 图 像 所 使 用 的 宽度 

height 可 选 ， 在 画布 上 绘制 图 像 所 使 用 的 高 度 





putImageData() 方 法 常用 3 个 参数 ， 即 imgData、x 和 y， 也 可 以 全 部 参数 一 起 使 用 。 
【范例 16-3 反 转 颜色 】 


Ls <canvas id="canvas" width="710" height="200"> 您 的 浏览 器 不 支持 canvas 。 
</canvas> 

Os <script> 

Ss var dw = document .querySelector("#canvas") .getContext ("2d"); 

4. Var img = new Image(); 

5。 img.src = "mm.jpg"7 

6 // 加 载 完毕 之 后 

Te img.onload = function(){ 

8。 dw.drawImage (img,0,0,355,200); 

9 var imgData = dw.getImageData(0,0,355,200); 


10 . for (var i=0,n=imgData.data.length;i<n;i+=4) 

和 { 

2 imgData.data[il]=255-imgData.data[i]7 

3 imgData.data[i+1]=255-imgData.data[i+1]; 
14. imgData.data[i+2]=255-imgData.data[i+2]7 
TD imgData.data[i+3]=2557 

16。 } 

Es dw.putImageData (imgData, 355,0); 

18. } 

下 SS </script> 
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值得 注意 的 是 Canvas 中 的 图 像 像素 格式 ， 通 过 getImageData() 方 法 获取 的 像素 数据 都 放 
在 imgData 对 象 的 data 属性 中 ， 如 第 一 个 像素 的 RGBA 四 个 值 分 别 是 : 


imgData.data[0] 
imgData.data[1] 
imgData.data[2] 
imgData.data[3] 


第 二 个 像素 的 RGBA 四 个 值 分 别 是 : 


imgData.data[4] 
imgData.data[5] 
imgData.data[6] 





imgData.data[7] 


其 他 的 以 此 类 推 ， 所 以 范例 中 每 次 循环 的 补偿 是 +=4。【 范 例 16-3】 效 果 如 图 16-3 所 示 。 


文件 中 ”编辑 EE) 查看 WW 历史 GG) 书签 @) 工具 中 帮助 如 


Canvas 








图 16-3 Canvas 反 转 图 像 颜色 


16.2.2 灰 度 控制 一 一 黑白 灰 效 果 
使 用 前 面相 同 的 图 片 ， 对 RGBA 设置 不 同 值 而 产生 不 同 效果 ， 具 体 请 看 【范例 16-4】。 
【范例 16-4 黑白 灰 效 果 】 


Var dw = document .querySelector ("#canvas") .getContext ("2d"); 
Var img = new Image(); 
img.src = "mm.jpg"; 
// 加 载 完毕 之 后 
img.onload = function(){ 
dw.drawImage (img,0,0,355,200); 
var imgData = dw.getImageData(0,0,355,200); 
var px = imgData.data; 


ownamnouwm 必 wp 


for (var i=0,n=px.length;i<n;i+=4){ 
Var v = PX[il*0.2+px[i+1]*0.1+px[i+2]*0.97 


- 
Se 
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Px[il= v; 


> px[i+1]=v; 

3 Px[i+2]=v; 

14. } 

15 dw.putImageData (imgData, 355, 0); 
6。 } 


【范例 16-4】 中 第 10 行 代码 计算 一 个 值 ， 这 个 值 遵循 颜色 加 减法 则 ， 参 数 不 同 即 导 致 
效果 不 同 ， 对 比 【 范 例 16-3】 可 知 ， 如 果 无 须 对 某 个 值 进行 操作 则 可 以 忽略 ， 当 前 范例 就 没 
有 对 透明 度 进 行 操作 。 实 现 后 的 效果 如 图 16-4 所 示 。 





编辑 加 ”查看 WD” 历史 避 ) 书签 如。 工具 中 帮助 0 
[Drs + 











图 16-4 Canvas 对 图 片 灰 度 进行 控制 


16.2.3 透明 度 控 制 


在 Photoshop 中 ， 透 明度 控制 是 一 项 常用 的 操作 ， 先 看 如 图 16-5 所 示 的 效果 。 





总 部 于 ) 查看 如 历史 G) 书签 @) 工具 0) 玫 助 如 
医 











图 16-5 透明 度 控 制 
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图 16-5 的 实现 代码 请 看 【范例 16-5】。 
【范例 16-5 通过 像素 操作 设置 透 阴 效果 】 


二 <canvas id="canvas" width="710" height="400"> 您 的 浏览 器 不 支持 canvas 。 
</canvas> 

2 <script> 

KE 时 var dw = document .querySelector ("#canvas") .getContext ("2d") 

4. Var img = new Image(); 

img.src = "caodi.jpg"; 

6. // 加 载 完 毕 之 后 

ne img.onload = function(){ 

8。 dw.drawImage (img,0,0,355,200); 

9。 var imgData = dw.getImageData(0,0,355,200) 

二 dw.putImageData (Opt (imgData, "left"),0,0); 

和 Gw.putImageData (Opt (imgData, "right"),355,0); 

12. dw.putImageData (Opt (imgData, "up"),0,200); 

3 dw.putImageData (Opt (imgData, "down") ,355,200); 

14. } 

55 function Opt (imgDatavtype) { 

EE for (var y=0;y<imgData.height;y++){ 

i for (var x=0;x<imgData.width;x++){ 

LB; var idx = y*imgData.width + x; 

9s var P = idx*4; 

S20 var 0 = 255; 

2 Switch (type)t{ 

225 Sase "ectt™s 

2 // 从 右 往 左 透 明 

24. oO = 255*(x/imgData.width); 

25。 break; 

26° case "right": 

2 // 从 左 往 右 透明 

28 . 0 = 255* (1-x/imgData.width) 7 

人 局 break; 

305 case "up": 

Su // 从 下 往 上 透明 

2 0 = 255*(y/imgData.height); 

338 break; 
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34. case "down": 

58 // 从 上 往 下 透明 

36° o = 255*(1-y/imgData.height); 
有 break; 

20 } 

39。 imgData.data[p+3] = o 


41. } 

42. return imgData; 
43. 1 

44. </script> 


主要 的 操作 代码 在 【范例 16-5】 的 Opt0 方 法 中 ， 这 里 的 循环 遍历 策略 和 前 面 的 有 所 不 
同 ， 本 例 中 是 按照 从 上 往 下 、 从 左 往 右 的 顺序 去 处 理 图 形 像素 点 。 透 明 值 根据 像素 所 在 位 置 
的 x 和 y 坐 标 来 确定 ， 从 而 实现 不 同方 向 的 渐变 。 


16.2.4 倒影 


倒影 是 一 个 有 趣 的 操作 ， 核 心 操作 也 是 对 像素 进行 处 理 ， 大 致 思路 是 通过 反 转 之 后 再 加 
上 透明 度 操作 ， 请 直接 看 图 16-6 和 【范例 16-6】 中 的 代码 。 


I 5s — Worilla Firefor [= 9 
文才 四 可 人 加 王 看 历史 G) 书 和 中 工具 中 条 








16-6 倒影 


264 


范例 16-6 图 形 倒影 】 


证 <canvas id="canvas"width="355"height="400"> 您 的 浏览 器 不 支持 canvas。</canvas> 
<8cript> 

光志 Var dw = document .querySelector ("#canvas") .getContext ("2d"); 
4. Var img = new Image(); 

img.src = "caodi.jpg"; 

6. // 加 载 完 毕 之 后 

I img.onload = function(){ 

8. dw.drawImage (img,0,0,355,200); 

9, var imgData = dw.getImageData(0,0,355,200); 

0 dw.putImageData (Opt (Txt (imgData) , "down"),0,180,0,25,355,180); 
Ls 上 

2 function Txt (imgData){ 

3 var h = imgData.height; 

14. var w = imgData.width; 

Ss for (var y=0;y< h/2;y++){ 

人 forl(var x=0;x<w;x++) { 

(这 二 ER 

8 var i2 = (h=y)*w + 工 ? 

190 var pl = il*4; 

20. var p2 = i2*4; 

2 for (m=0;m<4;m++) { 

22, var k = imgData.data[lpl+m]; 
3 imgData.data[pl+m]=imgData.data[p2+m]; 
用 二 imgData.data[p2+m]=k; 

25. } 

6 j 

27， } 

285 return imgData; 

29。 1 

30. function Opt (imgData,type){ 

3 // 省 略 ， 同 【范例 16-5】 

32。 


证 </script> 


倒影 的 思路 也 同样 适用 于 文体 图 形 ， 其 效果 也 更 加 明显 ， 此 处 不 再 效 述 ， 请 读者 自行 实践 。 
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16.3 实现 压缩 解压 功能 


图 片 在 网 络 上 传送 时 ， 很 重要 的 一 点 就 是 体积 大 小 ， 信 息 最 完整 的 当然 是 位 图 ， 而 它 的 
体积 也 是 最 庞大 的 ， 其 他 图 形 格式 则 根据 应 用 需求 的 不 同 而 选择 不 同 的 算法 。 一 般 来 说 ， 位 
图 数据 都 会 被 压缩 处 理 ， 使 其 体积 相应 变 小 。 








16.3.1 载 入 位 图 
选取 一 张 合适 的 bmp 格式 的 位 图 文件 ， 通 过 drawImage 绘制 到 画布 上 。 


Var dw = document .querySelector ("#canvas") .getContext ("2d"); 
Var img = new Image() 7 
img.src = "16-6.bmp"; 
// 加 载 完毕 之 后 
img.onload = function(){ 
dw.drawImage (img, 0,0); 
} 


16.3.2 压缩 位 图 
在 网 页 中 增加 一 个 按钮 和 一 个 <div> 元 素 ， 用 来 显示 压缩 后 的 图 片 : 


<input type="button" value="Convert to JPG" onclick="tojpg()"> 


<div id="to"></div> 


点 击 按钮 之 后 进行 jpg 格式 的 压缩 处 理 ， 然 后 通过 <img> 元 素 输出 到 <div> 元 素 中 ， 这 样 
鼠标 就 可 以 另存 这 个 图 片 了 。 
tojpg() 方 法 的 代码 如 下 : 


function tojpg(){ 
Var data=document .getElementBYyId ("canvas") .toDataURL ("image/jpeg"); 
Var el = document .createElement ("img"); 
el.src = data; 
document .getElementById ("to") .apPpendChild(el) 


转换 和 压缩 的 核心 就 是 ttDataURL() 方 法 ， 最 终 的 效果 如 图 16-7 所 示 。 
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图 16-7 toDataURL 转换 后 的 图 形 


在 图 16-7 中 ，<img> 元 素 的 src 属性 不 再 是 传统 的 以 http 开头 的 字符 串 ， 而 是 特定 格式 
的 Base64 处 理 过 的 字符 串 。 


16.3.3 保存 到 本 地 


可 以 将 转换 后 的 图 片 保存 到 本 地 计算 机 ， 在 标准 浏览 器 中 用 JavaScript 可 以 简单 地 实 
现 ， 请 看 下 面 的 代码 : 


function savejpg(){ 
var data = document .getElementById("canvas") .toDataURL ("image/jpeg"); 
document . location.href = data.replace ("image/jpeg","image/octet-stream"); 
} 


在 “保存 ”按钮 上 调用 savejpg0 方 法 ， 浏 览 器 就 会 弹出 下 载 对 话 框 ， 如 图 16-8 所 示 。 


EE 
ET 7 
一 sjsg/IcmlaeehtnaTTiaasrhaatgnonaeMzacZFWklyEzhsr/z 
加 个 是: inazsyoctet-atrean C5.6 加 ) 
EE aat: 











图 16-8 保存 文件 
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JavaScript 实战 一 一 JavaScript、jQuery、HTML5、Node.js 实例 大 全 (第 2 版 ) 


16.4 相关 参考 


虽然 通过 JavaScript 可 以 直接 保存 文件 ， 但 是 还 有 一 些 不 足 ， 比 如 无 法 指定 保存 名 称 ， 
使 用 服务 器 交互 会 更 加 完美 。 

另外 ， 利 用 服务 端 功能 ， 还 可 以 把 文本 文件 压缩 以 输出 成 体积 更 小 的 图 形 格式 文件 ， 在 
浏览 器 客户 端 利用 getImageData() 方 法 ， 还 可 以 将 文本 内 容 还 原 回 来 ， 但 一 般 来 说 ， 文 本 文 
件 通 常用 服务 器 的 gZip 压缩 方式 来 解决 体积 问题 ， 只 不 过 把 文本 转换 成 图 形 会 相对 保密 一 
些 ， 客 户 端 不 会 直接 看 到 文本 内 容 。 不 过 这 些 都 需要 服务 端 开发 知识 ， 读 者 可 自行 研究 。 

腾讯 专业 级 图 像 处 理 引擎 一 一 http://alloyteam.github.io/AlloyPhoto/。 
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第 四 篇 


jQuery 
实战 篇 





第 17 章 jQuery 简介 


任何 事物 都 不 及 “伟大 ”那样 简单 ; 事实 上 ， 能 够 简单 便 是 伟大 。 


随 着 Web 2.0 的 兴起 ， 用 户 对 Web 应 用 程序 的 功能 性 、 易 用 性 和 交互 性 都 提出 了 很 高 的 
要 求 ， 因 此 HTML、JavaScript、AJAX 等 技术 都 在 不 断 地 向 前 飞速 发 展 。 特 别 是 JavaScript 
技术 ， 在 Web 应 用 程序 客户 端 所 起 的 作用 也 越 来 越 重 要 。 于 是 ， 越 来 越 多 的 开发 者 将 自己 编 
写 的 各 种 丰富 多 彩 的 功能 封装 成 类 库 发 布 到 网 上 ， 供 更 多 的 人 用 来 解决 类 似 的 问题 ， 其 中 非 
常 优秀 的 一 个 类 库 就 是 jQuery 库 。 

本 章 主 要 知识 点 : 


jQuery 特点 

jQuery 简单 应 用 

jQuery 插件 一 一 jQuery UI 
jQuery UI 简单 应 用 





17.1 什么 是 jQuery 


jQuery 库 最 初 是 由 JavaScript 神童 John Resig 编写 的 一 个 JavaScript 库 。 后 来 由 于 jQuery 
的 优秀 设计 ， 吸 引 了 来 自 世 界 各 地 的 众多 JavaScript 高 手 加 入 ， 其 中 核心 成 员 包括 美国 人 
Brandon Aaron 和 德国 人 Jorn Zaefferer。 

jQuery 库 是 众多 JavaScript 库 中 比较 优秀 的 一 款 ， 其 宗旨 是 “write less，do more” 【如 
图 17-1 所 示 ) ， 即 该 库 的 语法 极其 简洁 ， 代 码 风格 独特 而 又 优雅 。 正 是 由 于 jQuery 库 的 这 
些 特征 ， 许 多 刚 接触 JavaScript 库 的 新 手 都 选择 了 它 。 


sjJQuerY 


write less, do more. 





图 17-1 jQuery 的 宗旨 


17.1.1 jQuery 的 历史 


在 2006 年 ， 于 Mozilla 公司 任职 的 John Resig 受到 JavaScript 领域 先驱 人 物 Dean 
Edwards 和 Simon Willison 等 人 的 启发 ， 开 发 了 一 套 具 有 很 多 函数 的 JavaScript 库 ， 这 就 是 
jQuery 的 前 身 。 刚 开始 jQuery 库 只 可 快速 查找 网 页 中 的 元 素 。 随 着 越 来 越 多 开发 者 的 加 入 ， 
jQuery 库 集 成 了 JavaScript、CSS、DOM 和 AJAX 的 强大 功能 。jQuery 的 发 布 版 本 如 下 。 
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综 上 所 述 ， 版 本 的 版 本 号 升级 主要 有 3 种 。 


2006 年 8 月 ， 发 布 jQuery 1.0， 该 版 本 是 第 一 个 稳定 版 本 ， 具 有 对 CSS 选择 符 、 事 件 
处 理 和 AJAX 交互 的 支持 。 

2007 年 1 月 ， 发 布 jQuery 1.1， 该 版 本 极 大 地 简化 了 API， 合 并 了 许多 较 少 使 用 的 方 
2007 年 7 月 ,发布 jQuery 1.1.3， 该 版 本 优化 了 jQuery 选择 符 引 擎 执行 的 速度 。 

2007 年 9 月， 发布 jQuery 1.2， 该 版 本 去 掉 了 XPath 选择 器 ， 新 增 了 命名 空间 事件 。 
2008 年 5 月 ,发 布 jQuery 1.2.6， 该 版 本 引入 Dimensions 插件 到 核心 库 中 。 

2009 年 1 月 ， 发 布 jQuery 1.3， 该 版 本 使 用 了 全 新 的 选择 符 引擎 Sizzle， 使 得 性 能 进 
一 步 提 升 。 

2010 年 1 月 ， 发 布 jQuery 1.4， 该 版 本 进行 了 一 次 大 规模 更 新 ， 提 供 了 DOM 操作 ， 
并 且 增 加 了 很 多 新 的 方法 或 增强 了 原 有 的 方法 。 

2010 年 2 月 ,发布 jQuery 1.4.2， 该 版 本 添加 了 delegate() 和 undelegate() 两 个 新 方法 ， 
提升 了 灵活 性 和 浏览 器 一 致 性 ， 同 时 对 事件 系统 进行 了 升级 。 

2011 年 1 月 ， 发布 jQuery 1.5， 该 版 本 重 写 了 AJAX 组件 ， 增 强 了 扩展 性 和 性 能 。 
2011 年 5 月 ， 发 布 jQuery 1.6， 该 版 本 重 写 了 Attribute 组 件 ， 引 入 了 新 对 象 和 方法 。 
2011 年 11 月， 发 布 jQuery 1.7， 该 版 本 引入 了 on() 和 offl) 方 法 。 

2012 年 3 月 ， 发 布 jQuery 1.7.2， 该 版 本 进行 了 一 些 优化 和 升级 。 

2012 年 7 月 发 布 了 jQuery 1.8，8 月 发 布 了 1.8.1，9 月 发 布 了 1.8.2， 这 些 版 本 重 写 了 
选择 符 引 擎 ， 修 复 了 一 些 问题 。 

2013 年 1 月 ,发 布 jQuery 1.9， 该 版 本 实现 CSS 的 多 属性 设置 ， 增 强 了 CSS3 功能 。 
2013 年 5 月 ， 发布 jQuery 1.10， 该 版 本 增加 了 一 些 功能 。 

2013 年 4 月 ,发布 jQuery 2.0， 该 版 本 是 一 个 重大 的 更 新 版 本 ， 不 仅 不 再 支持 
IE6/7/8， 而 且 体积 更 小 、 速 度 更 快 。 

2016 年 6 月 ， 发 布 jQuery 3.0， 这 是 一 个 体积 更 轻巧 、 速 度 更 快 的 jQuery，， 而 且 保 
持 着 向 后 兼容 的 特性 。 


大 版 本 升级 ， 比 如 1.x.x 升级 到 2.x.x， 这 种 升级 规模 是 最 大 的 ， 改 动 的 地 方 是 最 多 
的 ， 周 期 也 是 最 长 的 ，jQuery 从 1x.x 到 2.xx 用 了 7 年 ， 从 2.xx 到 3.xXx 又 用 了 3 年 。 


@ 小 版 本 更 新 ， 比 如 1.7 升级 到 1.8， 改 动 适中 ， 增 加 或 减少 了 一 些 功能 ， 一 般 周期 为 半 
年 到 一 年 左右 。 
@ 微 版 本 更 新 ， 比 如 1.8.1 升级 到 1.8.2， 修 复 一 些 Bug 或 错误 。 


版 本 的 内 容 升 级 主要 也 有 3 种 。 


e@ 核心 库 的 升级 ， 比 如 优化 选择 符 、 优 化 DOM 或 者 AJAX 等 ;这 种 升级 不 影响 开发 者 
的 使 用 。 
@ 功能 性 的 升级 ， 比 如 剔除 一 些 过 时 的 方法 、 新 增 或 增强 一 些 方法 等 ; 这 种 升级 需要 了 
解 和 学 习 。 
@ Bug 修复 之 类 的 升级 ， 对 开发 者 使 用 没有 影响 。 
读者 可 能 会 担心 学 了 1.3 版 本 的 jQuery， 那 么 升级 新 版 本 后 是 不 是 还 需要 重 学 ? 没有 必 
要 ， 因 为 并 不 是 每 次 升级 一 个 版 本 都 会 增加 或 剔除 功能 ， 一 半 左 右 都 是 内 部 优化 ， 升 级 到 新 
版 本 并 不 需要 任何 学 习 成 本 。 
如 何 选择 自己 的 jQuery 版本? 主流 的 1.x、2.x、3.x 都 可 以 使 用 ， 读 者 根据 自己 的 需要 来 


e@ 1.x: 兼容 IE6/7/8, 使 用 最 为 广泛 ， 官 方 只 做 Bug 维护 ， 功 能 不 再 新 增 。 因 此 一 般 项 目 
来 说 ， 使 用 1.x 版 本 就 可 以 了 。 

e@ 2.x: 不 兼容 IE6/7/8， 很 少 有 人 使 有 用， 官方 只 做 Bug 维护 ， 功 能 不 再 新 增 。 

e 3.X: 不 兼容 IE6/7/8， 只 支持 最 新 的 浏览 器 。 除 非特 殊 要 求 ， 一 般 不 会 使 用 3.x 版 本 ， 
很 多 老 的 jQuery 插件 不 支持 这 个 版 本 。 目 前 该 版 本 是 官方 主要 更 新 维护 的 版 本 。 


17.1.2 为 什么 要 使 用 jQuery 


近 些 年 ， 除 jQuery 库 之 外 ， 还 出 现 了 5 个 比较 流行 的 库 ， 分 别 为 YUI、Prototype、 
Mootools、Dojo 和 ExtJS 。 

YUI 库 的 官方 网 站 为 http://yuilibrary.com/， 其 Logo 如 图 17-2 所 示 。YUI 库 的 全 称 为 The 
Yahoo! User Interface Library， 该 库 是 雅虎 公司 开发 的 一 套 完 备 的 、 扩 展 性 良好 的 富 交 互 网 
页 工具 集 。 

Prototype 库 的 官方 网 站 为 http://prototypejs.org/， 其 Logo 如 图 17-3 所 示 。Prototype 库 是 
最 早 成 型 的 JavaScript 库 之 一 ， 对 JavaScript 内 置 对 象 做 了 大 量 的 扩展 。 由 于 该 库 是 最 早出 现 
的 库 ， 因 此 该 库 整体 上 对 面向 对 象 编程 思想 的 把 握 不 是 很 到 位 ， 从 而 导致 结构 非常 松散 。 
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人 prototype 


图 17-2 YUI 库 的 Logo 图 17-3 Prototype 库 的 Logo 


Mootools 库 的 官方 网 站 为 https://mootools.net/， 其 Logo 如 图 17-4 所 示 。Mootools 库 是 一 
款 轻 量 、 简 洁 、 模 块 化 和 面向 对 象 的 JavaScript 框架 ， 该 库 的 模块 化 思想 比较 优秀 ， 核 心 代 
码 比较 小 只 有 8KB 左右 。 


moorooys 


从 <ornPecf Jovascript framework 


图 17-4 Mootools 库 的 Logo 


Dojo 库 的 官方 网 站 为 http://dojotoolkit.org/， 其 Logo 如 图 17-5 所 示 。Dojo 库 的 强大 之 处 
在 于 提供 了 其 他 库 没有 的 功能 ， 例 如 离线 存储 、 图 标 组 件 等 。 

ExtJS 库 的 官方 网 站 为 https:/www.sencha.com/products/extjs/， 其 Logo 如 图 17-6 所 示 。 
ExtJS 库 简 称 Ext， 原 本 是 对 YUI 库 的 一 个 扩展 ， 现 在 主要 用 于 创建 前 端 用 户 界面 。 





图 17-5 Dojo 库 的 Logo 图 17-6 ExtJS 库 的 Logo 


在 众多 JavaScript 库 中 ， 为 什么 很 多 开发 者 都 大 力 推荐 jQuery 呢 ? 这 需要 从 两 方面 进行 
分 析 。 一 方面 查看 jQuery 库 官方 网 站 相关 文档 ， 发 现 该 库 可 以 实现 如 下 功能 : 

® 以 CSS 方式 取得 文档 中 的 元 素 。 

ee 控制 页 面 外 观 。 

e 简化 JavaScript 码 操作 。 

e@ 响应 用 户 的 交互 操作 。 

@ 为 页 面 添加 动态 效果 。 

日 支持 AJAX 技 术 实 现 无 刷新 更 新 。 


另 一 方面 ，jQuery 库 除 实现 上 述 功能 之 外 ， 与 其 他 库 相 比 还 具有 许多 特点 。 
@ 轻 量 级 : jQuery 库 十 分 轻巧 ， 以 jQuery1.10.2 版 本 为 例 ， 如 果 采 用 的 是 无 压缩 版 ， 则 
大 小 为 266KB。 如 果 要 使 用 压缩 版 本 ， 将 会 更 小 ， 只 有 90KB。 
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e@ 解决 浏览 器 兼容 性 : jQuery 库 消除 了 各 个 主流 浏览 器 之 间 的 差异 ， 使 开发 人 员 不 必 再 
考虑 各 个 浏览 器 的 兼容 性 。 

e@ 出 色 的 文档 元 素 操作 : 采用 与 CSS 非常 类 似 的 方式 来 查找 和 操作 元 素 。 

e。 链 式 操 作 方式 : 在 jQuery 库 中 ， 当 对 一 个 对 象 执行 一 组 操作 时 ， 可 以 直接 连 写 ， 无 
须 重复 对 对 象 的 引用 进行 操作 。 

@ 支持 扩展 : jQuery 库 支 持 简单 易 用 的 插件 机 制 ， 即 开发 人 员 可 以 根据 实际 情况 进行 开 
发 或 者 选用 具有 某 些 功能 的 插件 。 

日 完整 的 学 习 资 源 : 为 了 便于 开发 者 学 习 ，jQuery 库 的 官方 网 站 不 仅 提供 了 非常 详细 的 
API， 而 且 在 网 上 也 有 很 多 的 资料 。 

@ 开源 : 对 于 jQuery 库 ， 开 发 者 不 但 可 以 随意 地 查看 源码 ， 还 可 以 自由 地 使 用 ， 甚 至 
可 以 向 jQuery 库 研 发 组 织 提 出 改进 意见 。 


17.2 编写 jQuery 代码 


了 解 jQuery 库 的 相关 知识 后 ， 就 可 以 搭建 jQuery 环境 ， 然 后 进行 jQuery 简单 代码 开发 


17.2.1 下 载 jQuery 


目前 jQuery 库 分 为 jQuery 1.x、jQuery 2.x 和 jQuery 3.x， 这 3 个 版 本 区 别 前 面 已 经 介绍 
了 。jQuery 版 本 更 新 速度 非常 快 ， 现 在 主推 的 版 本 为 jQuery 3.x， 本 书 使 用 的 jQuery 库 版 本 
为 32。 

jQuery 3.X 不 仅 能 够 方便 地 处 理 HTML、CSS、Events 和 实现 动画 效果 ， 还 对 Web 应 用 
程序 提供 AJAX 交互 。 可 以 通过 下 面 步骤 来 实现 该 库 的 下 载 。 


人 ED 首先 访问 下 载 jQuery 库 的 官方 网 站 ( http:// jquery.com ) ， 如 图 17-7 所 示 。 


Download AplDocumentation Blog Plugins Browser Support 





图 17-7 jQuery 库 官 方 网 站 
人 2 打开 jQuery 首页 后 ， 单 击 页 面 中 的 Download jQuery 导航 栏 ， 就 会 进入 关于 jQuery 
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库 下 载 页 面 ( 如 图 17-8 所 示 ) ， 在 该 页 面 中 展示 了 该 库 的 最 新 版 本 、 最 新 代码 和 

新 闻 动 态 。 向 下 拖 动 滚动 条 会 看 到 jQuery 1.10.2 版 本 和 jQuery 2.0.3 版 本 。 对 于 每 

个 版 本 的 jQuery 库 ， 都 会 提供 以 下 两 种 类 型 。 

®@ production jQuery x.xx.x: 该 类 型 是 经 过 JSMin 等 工具 压缩 的 版 本 ， 即 去 掉 了 文 
档 里 的 注释 和 空白 ， 由 于 该 版 本 容量 比较 小 ， 因 此 主要 应 用 于 产品 和 项 目 。 

®@ development jQuery x.xx.x: 该 类 型 是 没有 经 过 压缩 的 版 本 ， 便 于 开发 者 阅读 源 代 
码 ， 主 要 用 于 测试 、 学 习 和 开发 。 


Downloading jQuery 

Compressed and uncompressed copies of jQuery fies are available The uncompressed file is best used during 
development or debugginy; the compressed file saves bandwidth and improves performance in production. You 

can also download a sourcemap file for use when debugging with a compressed file The map file is not required 
for users to run jQuery, itjust improves the developers debugger experience. As of jQuery 1.11.0/2.1.0 the JR 
SoUrceNappinalRL comment is not included in the compressed file 

To locally download these files, right-click the link and select "Save as.." from the menu. 


jQuery 
For help when upgrading jQuery, please see the Upcrade guide most relevant to your version. We also 
recommend using the jQuery Migrate plugin 


Download 





compressed. production jQuery 3.2.1 


Download the uncompressed development jQuery 32.1 











图 17-8 下 载 页 面 


人 3 术 书 采用 最 新 的 无 压缩 版 ， 因 此 需要 单 击 “ Download the uncompressed， 
development jQuery 3.2.1” 超 级 链接 实现 下 载 。 


17.2.2 简单 应 用 jQuery 


使 用 jQuery 库 不 需要 安装 ， 只 需要 把 下 载 的 jquery-3.2.1js 文件 保存 到 一 个 公共 位 置 即 
可 。 由 于 JavaScript 是 一 种 解释 型 语言 ， 所 以 在 具体 应 用 时 不 必 进 行 编译 或 者 构建 ， 只 需要 
在 相关 HTML 文档 中 通过 <script> 标 签 引用 jquery-3.2.1js 文件 。 

大 多 数 jQuery 应 用 程序 都 包含 两 个 部 分 : HTML 文档 和 为 该 文档 添加 行为 的 js 文件 。 下 
面 通过 应 用 jQuery 库 实 现 单 击 按钮 弹出 对 话 框 功能 ， 具 体内 容 如 【范例 17-1】 所 示 ， 该 范例 
创建 承载 js 文件 的 HTML 文件 。 


【范例 17-1 承载 js 文件 的 HTML 文件 】 


1 <!DOCTYPE html> 

2 <html> 

3。 <head> 

4. <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" /> 

5. <title> 第 一 个 jQuery 程序 </title> 

6. <!-- 引入 jquery-3.2.1.js 库 --> 

Ns <script type="text/javascript" src="jquery/jquery-3.2.1. 


276 


js"></script> 


:加 <!-- 引入 jquery01.js 文件 --> 

3。 <script type="text/javascript" src="javascript/jquery01. 
Io"></script> 

0 </head> 

证 呈 <body> 

2 <input type="button" value="button" /> 

< </body> 

14. </html> 


在 上 述 代码 中 ， 第 7 行 引入 jQuery 库 文件 ， 第 12 行 设置 一 个 按钮 组 件 。 
下 面 编写 实现 弹出 对 话 框 的 jQuery 代码 ， 即 上 述 代码 中 第 9 行 代码 引入 的 jQuery 代码 文 
件 内 容 ， 具 体 如 下 。 


于 $ (function(){ 

2 $('input').click(function(){ // 获 取 input 类 型 组 件 ， 然 后 设置 该 组 件 的 单 击 事件 
alert ("第 一 个 jQuery 程序 ! ") // 弹 出 对 话 框 

4. ]) 7 

5 ]) 7 


在 上 述 代码 中 ， 实 现 页 面 加 载 时 ， 弹 出 对 话 框 并 显示 “第 一 个 jQuery 程序 ! ”字符 串 。 
打开 HTML 页 面 ， 如 图 17-9 所 示 ， 在 该 页 面 中 会 显示 一 个 名 为 button 的 按钮 ， 单 击 该 
按钮 则 会 弹出 一 个 对 话 框 ， 如 图 17-10 所 示 。 





€ en rai 加 
| a 





17-9 单 击 按钮 图 17-10 弹出 对 话 框 


17.2.3 调试 jQuery 程序 


由 于 Web 开发 离 不 开 JavaScript 语言 ， 而 jQuery 库 是 JavaScript 语言 中 最 受 欢迎 的 库 ， 
因此 该 库 同样 也 是 不 可 缺少 的 。 由 于 jQuery 库 是 脚本 语言 ， 因 此 没有 一 个 开发 工具 提供 调试 
功能 。 不 过 值得 庆幸 的 是 ，Firefox 浏览 器 专门 提供 了 一 个 名 为 Firebug 的 插件 进行 jQuery 库 
程序 调试 。 随 着 时 间 的 推移 ，IE 8 和 Chome 浏览 器 也 集成 了 jQuery 库 调 试 。 

对 于 Firefox 浏览 器 ， 单 击 菜单 栏 中 的 “工具 ”|“Web 开发 者 ”|“Firebug 命令 ”， 或 者 
使 用 快捷 键 F12 都 可 以 打开 调试 工具 ， 如 图 17-11 所 示 。 
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17-11 脚本 调试 界面 


为 了 演示 调试 工具 ， 通 过 浏览 器 打开 【范例 17-1】 中 的 页 面 
按 快 捷 键 F12 则 可 以 打开 脚本 调试 界面 ， 如 图 17-12 所 示 。 
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图 17-12 【范例 17-1】 的 脚本 调试 界面 
在 脚本 调试 界面 中 ， 选 择 “脚本 ”选项 卡 ， 在 内 容 区 域 单 击 “ 启 用 ”超级 链接 即 可 以 启 
动 对 jQuery 库 程 序 的 调试 功能 ， 如 图 17-13 所 示 。 
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图 17-13 启用 jQuery 代码 调试 
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启动 jQuery 代码 调试 后 ， 在 内 容 区 域 的 左 侧 代码 窗口 中 ， 单 击 第 3 行 代码 的 行 号 3， 即 


可 在 该 行 添加 一 个 “ 断 点 ”， 如 图 17-14 所 示 。 如 果 行 号 前 面 有 一 个 红色 的 球状 图 标 ， 并 且 
该 行 代码 背景 为 高 亮 显 示 ， 说 明 断 点 添加 成 功 。 


) 第 一 个 jQuery 程序 - Hozilla Firefox 





HS ss | 脚本 ”| pon MS Cort 
» jquery, jo ~ 





17-14 添加 断 点 


单 击 页 面 中 button 按钮 ， 在 “监视 ”窗口 中 ， 可 以 很 方便 地 获取 当前 状态 中 的 一 些 变 量 
或 对 象 属性 的 信息 ， 如 图 17-15 所 示 。 


) 第 一 个 jQuery 程序 - Wozilla Firefor 


加 回避 
文件 @) 编辑 到) 查看 W) 历史 G) 书签 工具 中 帮助 0 
| 站 第 一 个 jauery 程 序 图 


bfile:///E:/17/coded1/jaueryOl. htnl © 


加 访问 最 多 [) 新 手 上 路 


] jqueryol. htnl 


$9 控制 全 BTL CSS | 由 本 > | DOR 网 络 


b evals® jquery0l.js ~ 
Seonetion 0 











* (2) dispatch “hant 全》 六 局 


SC input’), lick (tunetion 0 { 
alsrtf 第 一 个 jquery 各 序 1 ); 


中 | 监控 "上 堆 梳 其 点 


input 属 儿 四 friaa1ej 禾 = “batton 





图 17-15 监控 视图 


单 击 代码 窗口 中 工具 栏 的 “ 单 步 跳 过 ”按钮 或 者 使 用 快捷 键 F10， 继 续 执行 程序 ， 页 面 
中 会 弹出 对 话 框 ， 如 图 17-16 所 示 。 
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t 
input’), elick (funetion 0 
alert( 第 一 个 jguer7 程 序 








图 17-16 单 步 执行 
从 上 面 的 执行 结果 可 以 发 现 ，Firebug 插件 可 以 方便 开发 人 员 调 试 jQuery 代码 。 


17.3 基于 jQuery 的 UI 插件 


jQuery 库 除 了 具有 强大 的 核心 功能 外 ， 还 支持 同样 强大 的 扩展 能 力 ， 即 通过 使 用 jQuery 
库 简 洁 的 插件 架构 ， 开 发 人 员 能 够 把 该 库 功 能 扩展 得 更 加 丰富 。 到 目前 ， 随 着 jQuery 社区 的 
不 断 发 展 ， 关 于 该 库 的 插件 已 经 达到 数 百 个 ， 小 到 选择 器 助手 插件 ， 大 到 全 屏 的 用 户 界面 插 
件 。 在 众多 UI 插件 中 ， 除 了 由 官方 开发 和 维护 的 jQuery UI 插件 外 ， 还 存在 许多 第 三 方 提供 
的 UI 插件 。 


17.3.1 基于 jQuery 的 扩展 一 一 Query UI 插件 


为 了 便于 制作 出 基于 页 面 交互 的 应 用 程序 ，John Resig 与 jQuery 开发 团队 专门 提供 了 一 
个 UI 插件 一 一 Query UI 插件。 该 插件 补充 了 jQuery 库 的 不 足 ， 使 开发 人 员 更 容易 、 更 快捷 
地 创建 出 交互 性 强 、 效 果 超 炫 的 程序 界面 。 

由 于 jQuery 库 的 非凡 功能 ， 许 多 刚 接触 JavaScript 库 的 新 手 都 选择 了 它 。 同 样 ， 由 于 
jQuery UI 插件 非常 优秀 ， 因 此 成 为 开发 人 员 必 选 的 jQuery 插件 。 该 插件 的 优秀 之 处 在 于 集 
工具 集 和 交互 组 件 于 一 体 。 开 发 人 员 直 接 使 用 用 户 交 互 、 动 画 、 特 效 和 可 更 换 主题 的 可 视 控 
件 ， 就 可 以 构建 出 具有 良好 交互 性 的 应 用 程序 。 

查看 官方 网 站 可 以 发 现 ，jQuery UI 主要 分 为 如 下 3 个 部 分 。 


8 交互 组 件 ( Interactions ) : 主要 涉及 与 筷 标 交互 相关 的 操作 ， 例 如 拖 动 
(Draggable ) 、 拖 放 ( Droppable ) 、 缩 放 ( Resizable ) 、 选 择 (Selectable ) 、 排 序 
(Sortable ) 等 。 
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@ 工具 集 ( Widgets ) : 主要 是 一 些 界面 的 扩展 ， 例 如 折 梧 面板 (Accordion ) 、 自 动 完 
成 (Autocomplete ) 、 取 色 器 (Colorpicker ) 、 对 话 框 ( Dialog ) 、 滑 动 条 
(Slider) 、 标 签 (Tabs) 、 日 期 选择 器 ( Datepicker ) 、 放 大 镜 (Magnifier ) 、 进 度 
条 (Progressbar) 、 微 调控 制 器 ( Spinner) 、 历 史 (History ) 、 布 局 (Layout) 、 菜 
单 (Menu ) 、 工 具 提示 (Tooltips) 、 树 (Tree) 、 工 具 栏 (Toolbar ) 、 上 传 组 件 
( Uploader ) 等 。 

@ 动画 和 效果 组 件 ( Effects) : 主要 扩展 了 jQuery 库 中 的 animate() 方 法 ， 为 开发 人 员 提 
供 了 丰富 的 动画 效果 。 


17.3.2 下 载 jQuery UI 插件 
了 解 jQuery UI 插件 的 相关 知识 后 ， 就 可 以 搭建 jQuery UI 环境 ， 然 后 进行 jQuery UI 简 
单 代码 开 发 了 。 如 果 希 望 使 用 该 插件 ， 则 需要 从 jQuery UI 官方 网 站 下 载 ， 可 访问 下 载 
jQuery UI 的 官方 网 站 《http://jqueryui.com) ， 如 图 17-17 所 示 。 
回 jQue/Y So 


Domes 。 Domnload AplDocumentation Themes Development Support Blog Se 


About 


Interactions 


Download jQuery UI 
21 





图 17-17 jQuery UI 官方 网 站 


在 jQuery UI 首页 中 展示 了 关于 该 库 的 最 新 版 本 、 最 新 代码 和 新 闻 动 态 。 在 该 页 面 的 右 
上 部 会 看 到 jQuery UI 插件 的 各 种 类 型 版 本 。 


e@ Stable: 该 类 型 为 jQuery UI 插件 的 稳定 版 本 ， 本 书 采用 的 就 是 该 类 型 版 本 。 

e Legacy: 该 类 型 为 传统 版 本 。 

e@ Custom: 该 类 型 为 主题 定制 版 本 ， 官 方 网 站 专门 提供 了 一 个 用 jQuery 编写 的 主题 定 

制 器 ， 用 于 可 视 化 定制 自 定义 的 jQuery UI 主题 。 

主题 定制 器 由 Filament Grouop Inc 作者 创建 ， 主 要 用 于 发 布 开源 社区 的 jQuery 插件 。 而 
在 jQuery UI 插件 的 官方 网 站 上 ， 主 题 定制 器 主要 用 于 创建 自 定义 的 jQuery UI。 使 用 该 工 
具 ， 不 仅 可 以 快速 而 简单 地 创建 完整 的 主题 ， 而 且 该 主题 与 所 有 非 测试 版 本 的 组 件 都 兼容 。 

通过 单 击 jQuery UI 官方 网 站 中 的 Custom Download 超级 链接 ， 可 以 进入 关于 jQuery UI 主 
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题 定制 器 的 页 面 ( 如 图 17-18 所 示 ) ， 通 过 选择 相应 的 组 件 ， 可 以 配置 相应 jQuery UI 主 题 。 
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17-18 主题 定制 器 页 面 


通过 单 击 顶 部 的 Stable 连接 (如 图 17-19 所 示 ) ， 可 以 下 载 jQuery UI。 









Quick downloads: for jvery1.7°) | Legacy (Themes) (1.11.4: for jQuery1.6+) | Legacy (Themes) (1.10.4: for jQuery1.6*) 
TameqTTYT 
All jQuery Ul Downl 
Version 
® 1.12.1 (Stable, for jQuery17.) 
1.11.4 (Legacy, for juery1.6*) 
1.10.4 (Legacy, for jQuery1.6*) 
1.9.2 (Legacy, for jQuery1.6") 
Components 
加 Toegate Al 
Core 画 widget Provides a factory for creating stateful wideets with a common API. 
四 
ee A position Positions elements relative to other elements. 
Various utilities and 
holpers 加 :data Selector Selects elements which have data stored under the specifed key. 
a disableSelection Disable selection of text content within the set of matched 
elements- 











图 17-19 jQuery UI 下载 
本 书 采 用 1.12.1 版 本 ， 因 此 需要 单 击 “Stable” 和 “Themes” 两 个 超级 链接 。 
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下 载 完 jQuery UI 后 ， 会 得 到 两 个 压缩 文件 ， 即 jquery-ui-1.12.1.zip 和 jquery-ui-themes- 
1.10.3.zip， 解 压 jquery-ui-1.12.1.zip 后 的 目录 结构 如 图 17-20 所 示 。jquery-ui.js 和 jquery-ui.css 
是 生产 环境 中 用 到 的 UI 文件， 而 jquery-ui.minjs 和 jquery-ui.min.css 是 压缩 版 的 UI 文件 ， 可 
用 于 项 目 发 布 后 的 环境 中 。 

















各 称 EE 大 小 

部 external 

上 images 

目 AuTHORSsbdt 13 KB 
[DD indexhtml Chrome HTML D. 32 KB 
园 jquery-uicss JetBrains WebSt. 37 KB 
园 jquery-uijs JetBrains WebsSt.. 509 KB 
园 jquery-uimin.css JetBrains WebSt... 32 KB 
图 jquen-uiminjs JetBrains WebSt... 248 KB 
图 jquery-ui.structure.css JetBrains WebSt. 19 KB 
园 jquery-ui.structure.min.css JetBrains WebSt 16 KB 
园 jquery-uitheme.css JetBrains WebSt 19 KB 
国 jquery-uitheme.min.css JetBrains WebSt. 14 KB 
DB uceNSE.t¢t 文本 文档 2KB 
EE) packagejson JSON 文件 2 KB 


17-20 解压 后 的 目录 结构 


运行 demos 文件 中 的 index.html 页 面 ， 就 会 看 到 jQuery UI 库 中 各 个 页 面 组 件 示 例 效 果 的 
链接 (如 图 17-21 所 示 ) 。 单 击 每 个 组 件 会 立刻 显示 它 的 效果 ， 如 单 击 Tabs 组 件 前 和 单 击 后 
(如 图 17-22 所 示 ) ， 单 击 Dialog 组 件 则 会 显示 该 类 型 对 话 框 组 件 的 效果 (如 图 17-23 所 
示 ) 。 

Welcome to jQuery UI! 


This page demonetrates tho widgets and thame you selocted In Downioad Bullder Plaase make sure you are using tham with a 
compatible JOuery version 


YOUR COMPONENTS: 


Accordion 


Lorem ipsum dolor sit amet Lorem ipsum dolor Sil amet Lorem ipsum dolor sit amet 
» Second 


» Thed 


Autocomplete 











图 17-21 页 面 组 件 示 例 页 面 
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Tabs 








[和 secord ”mrd 





Lorem psum dolor sit amet, consectetur adipisicing elt sed do elusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat 








Tabs 





First 时 是 Third 








Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet omare, felis. Maecenas scelerisque sem 
non nisl. Fusce sed lorem in enim dictum bibendum 








图 17-22 单 击 组 件 的 前 后 效果 


Dialog Title 


Dialog 


Lorem ipsum dolor sit amet, consectetur adipisicing 
elit, sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim veniam, 

® Open Dialog quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat 


Overlay and 





图 17-23 Dialog 组 件 效 果 图 


17.3.3 简单 应 用 jQuery UI 插件 


使 用 jQuery UI 插件 同样 不 需要 安装 ， 只 需要 在 相关 HTML 文档 中 通过 <script> 标 签 引 入 
组 件 相关 的 js 文件 。 在 具体 设置 jQuery UI 组 件 相 关 属 性 时 ， 不 需要 专门 学 习 API， 因 为 
jQuery UI 插件 将 大 部 分 API 进行 了 统一 。 以 折合 组 件 (Accordion〉 为 例 ， 最 常用 的 API 如 下 。 

@ active: 设置 当前 显示 的 选项 卡 ， 序 号 从 0 开始 。 

@ animate: 设置 切换 选项 卡 时 的 动画 效果 ， 用 数字 表示 展开 的 时 间 长 短 。 

e@ classes: 设置 样式 。 

本 节 通 过 应 用 jQuery UI 插件 中 的 折 琶 组 件 (Accordion)〉， 实 现 一 个 折 琶 选项 卡 ， 具 体 
内 容 见 【 范 例 17-2】。 

在 具体 实现 时 ， 要 设计 一 个 包含 选项 卡 内 容 的 页 面 ， 其 HTML 代码 如 下 。 

【范例 17-2 包含 排序 内 容 的 HTML 文件 】 

<body> 


<div id="accordion"> 
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<h3> 第 一 章 </h3> <! | 选项 卡 内 容 --> 
<div> 介 绍 第 一 章 的 内 容 。</div> 
<h3> 第 二 章 </h3> 


为 了 便于 实现 内 容 排序 功能 ， 需 要 引入 jQuetry UI 插件 里 的 如 下 js 文件 : 





<script type="text/javascript" src="jquery-3.2.1.js"></script><script 
type="text/javascript" src="jquery-ui. js"></script> 
<link href="jquery-ui.css" rel="stylesheet"> 


上 述 导 入 的 js 文件 中 ，jquery-uijs 为 jQuery UI 的 核心 库 ，jquery-ui.css 为 jQuery UI 中 的 
样式 。 
下 面 编写 实现 折 车 卡 功能 的 jQuery UI 代码， 具体 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8" /> 
<title>jQuery UI </title> 
<link href="jquery-ui.css" rel="stylesheet"> 
</head> 
<body> 
<div id="accordion"> 
<h3> 第 一 章 </h3> 
<div> 第 一 章 的 内 容 。</div> 
<h3> 第 二 章 </h3> 
<div> 第 二 章 的 内 容 。</div> 
<h3> 第 三 章 </h3> 
<div> 第 三 章 的 内 容 。</div> 
</div> 
<script src="jquery-3.2.1.js"></script> 
<script src="jquery-ui.js"></script> 
<script> 
$("#accordion") .accordion( 


active: 1, // 默 认 激活 第 二 章 
animate: 2000 // 折 登 打开 的 时 间 为 2000 毫秒 
]) 7 
</script> 
</body> 
</html> 


打开 HTML 页 面 ， 如 图 17-24 所 示 ， 在 该 页 面 中 会 显示 相关 信息 。 单 击 “ 第 三 章 ” 选 项 
卡 后 效果 见 图 17-25。 
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第 - 章 第 章 

第 二 章 二 章 

和 第 三 章 的 内 容 。 

图 17-24 选项 卡 二 图 17-25 选项 卡 三 


17.3.4 其 他 UI 框架 


在 众多 第 三 方 提供 的 UI 框架 中 ， 由 于 这 些 UI 框架 拥有 自己 的 特征 ， 因 此 也 受到 许多 开 


发 者 的 追捧 。 其 中 比较 著名 的 有 jQuery Smart UI 框架 、Liger UI 框架 、jQuery RIA Framework 


.jQuery Smart UI 框架 
jQuery Smart UI 框架 与 其 他 框架 相 比 ， 是 一 款 纯 前 台 基 于 jQuery 库 的 开发 架构 。 为 了 实 


现 前 台 和 后 台 功 能 、 项 目 功能 和 数据 的 分 离 ，jQuery Smart UI 框架 使 用 
HTML+JavaScripttJSON 技术 完成 ， 同 时 通过 一 个 统一 数据 接口 与 服务 端 进行 数据 交换 。 


查看 jQuery Smart UI 框架 的 官方 网 站 http:/smartui.chinamzz.com， 可 以 发 现 该 框架 由 五 


大 部 分 组 成 (如 图 17-26 所 示 ) ， 各 个 部 分 的 作用 如 下 。 
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Basic Layout (基本 布局 ) : 该 部 分 主要 用 来 设置 
HTML 页 面 中 基础 布局 结构 ， 例 如 Head、Body、 
Foot、Search、Edit、View 等 公共 结构 。 

Basic CSS (基础 样式 ) : 该 部 分 主要 用 来 设置 
HTML 页 面 中 的 样式 ， 例 如 全 局 样式 、 基 本 布局 样 


式 、 各 种 基本 表单 和 控件 样式 。 


Core (JS) (核心 JS 库 ) : 该 部 分 为 jQuery Smart 


UI 框架 的 核心 部 分 。 


Basic CSS 





图 17-26 jQuery Smart UI 框架 组 成 


JQ Plugins (jQuery Plugins ) : 各 种 jQuery 的 插件 库 ， 包 括 jQuery Smart UI 自 带 的 和 


其 他 外 部 引入 的 插件 。 


Components ( 组件 库 ) : 封装 各 种 通用 的 业务 组 件 ， 例 如 数据 字典 、 信 息 发 布 、 图 片 


2. Liger UI 框架 


Liger UI 框架 是 采用 jQuery 泻 染 方式 开发 的 一 系列 控件 组 ， 例 如 弹 窗 、 菜 单 、 下 拉 框 、 
树 、 表 单 、 表 格 等 常用 UI 控件 。 与 其 他 UI 框架 相 比 ， 使 用 Liger UI 框架 可 以 快速 创建 风格 
统一 的 界面 效果 。 输 入 Liger UI 框架 的 官方 网 址 http://www.ligerui.com， 可 打开 首页 ， 如 图 
17-27 所 示 。 








图 17-27 Liger UI 插件 官网 首页 


查看 官方 网 站 ， 可 以 发 现 Liger UI 库 的 视图 简洁 明了 ， 操 作 更 为 简便 ， 甚 至 具有 轻松 实 
现 Web 桌面 的 能 力 ， 如 图 17-28 所 示 。 


EEA 





图 17-28 Web 桌面 效果 


与 其 他 UI 框架 相 比 ，Liger UI 库 处 理 表格 的 能 力 特 别 强 ， 例 如 实现 搜索 功能 表格 、 固 定 
列表 格 、 可 扩展 表格 等 ， 如 图 17-29 所 示 。 





287 





0 ime 


到 0, 宫 20 条 二 和 :0 





图 17-29 表格 效果 


3. DWZ 富 客户 端 框架 (jQuery RIA Framework) 

DWZ 富 客户 端 框架 (jQuery RIA Framework) 是 一 款 中 国 程序 员 自 己 开发 的 开源 框架 ， 
该 框架 是 基于 jQuery 实现 的 AJAX RIA 开源 框架 。 通 过 查看 官方 网 站 ， 可 发 现 DWZ 富 客户 
端 框架 的 设计 目标 是 简单 实用 、 快 速 开 发 和 降低 AJAX 开发 成 本 。 与 其 他 框架 相 比 ， 其 优点 
如 下 : 

e@ 完全 开源 ， 源 代码 没有 做 任何 混 消 处 理 ， 方 便 扩 展 。 

e CSS 和 JavaScript 代码 彻底 分 离 ， 修 改 样式 方便 。 

e@ 简单 实用 ， 扩 展 方便 ， 轻 量 级 框架 和 快速 开发 。 

ee 仍然 保留 了 HTML 的 页 面 布 局 方式 。 

e@ 支持 HTML 扩展 方式 调用 UI 组 件 ， 开 发 人 员 不 需要 写 JavaScript。 

e 只 需 懂 HTML 语法 ， 无 须 精通 JavaScript， 就 可 以 使 用 Ajax 开发 后 台 。 

@ 基于 jQuery，UI 组 件 以 jQuery 插件 的 形式 发 布 ， 扩 展 方便 。 


输入 DWZ 富 客户 端 框架 的 官方 网 址 http:Wi-ui.com， 打 开 首 页 ， 如 图 17-30 所 示 。 


288 
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17-30 DWZ 富 客户 端 框架 首页 
打开 界面 组 件 里 的 常用 组 件 ， 可 以 发 现 DWZ 富 客户 端 框架 支持 
板 、 窗 口 、 表 格 、 菜 单 等 ， 如 图 17-31 所 示 。 


) 简单 实用 因 产 jQuery VL 枢 染 -了 言 客 户 舌 琵 染 (J-01. con) oxilla Firefox 
次 件 加 机 内包 查看 o0。 历 类 澡 书 蔡 如 ”工具 中 而 和 00 





下 J-Ul.com 

则 用 jl 定夺 户 入 柜 架 
AMEN 
面板 

出 同 王 扒 避 面 多 
三 可 机 委 面 入 1 


后续 


素 和 区 有 排序 - 量 
| 刘 革 和 
闪 动 间 可 新生 到 认 头 同 面 具 
[1 
Bnet 
gestiogaup* 王 


+t 和 外 和 外 加 区 


可 所要 隐 认 芋 开 面 入 


Copyigmto 2010 wzEER 京 icP 音 05019125 呈 -10 





图 17-31 面板 效果 
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JavaScript 实战 一 一 JavaScript、jQuery、HTML5、Node.js 实例 大 全 (第 2 版 ) 





17.4 相关 参考 


e jQuery 库 一 一 http://jquery.com/。 
e jQuery UI 插件 一 一 http://jqueryui.com/。 
e jQuery 教程 一 一 http://www.w3school.com.cn/jquery/。 
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第 18 曹 用 动态 效果 来 啊 应 浏览 者 


生命 在 于 运动 。 





伏 尔 泰 


在 众多 的 动态 页 面 开发 技术 中 ，jQuery 库 是 一 种 易于 学 习 和 使 用 的 开发 技术 。 开 发 者 只 
需要 具备 很 少 的 编程 知识 ， 就 可 以 使 用 jQuery 库 知识 建立 各 种 动态 效果 来 响应 浏览 者 。 本 章 
涉及 的 动态 效果 有 导航 条 效果 、 超 级 链接 提示 效果 、 图 片 预览 效果 、 表 单 动态 效果 、 可 折 和 三 
列表 效果 和 淡 入 淡出 效果 。 


本 章 主要 知识 点 : 

jQuery 所 支持 的 选择 器 
操作 DOM 对 象 

响应 事件 

实现 动态 效果 


bd 
. 
二 
. 


18.1 jQuery 库 基础 


由 于 jQuery 的 语法 非常 简洁 ， 而 实现 的 功能 极其 强大 ， 因 此 在 网 页 的 代码 中 经 常见 到 其 
库 代 码 。 为 了 便于 开发 人 员 快 速 应 用 jQuery 库 ， 本 节 将 详细 介绍 jQuery 库 的 基础 知识 。 





18.1.1 jQuery 库 的 核心 方 


在 jQuery 程序 代码 中 ， 不 管 是 页 面 元 素 的 选择 还 是 内 置 功能 方法 ， 都 以 一 个 美元 符号 
“$” 和 一 对 圆 括号 开始 。 其 实 “$0” 方 法 是 jQuery 库 中 最 重要 、 最 核心 的 方法 一 一 jQuery() 
的 简写 ， 主 要 用 来 选择 页 面 元 素 或 执行 功能 方法 。 因 此 如 下 代码 : 

$ (function() {}); // 执 行 一 个 匿名 方法 


SDDS // 进 行 执行 的 ID 元 素 选 择 
$('#box') .css('color' 'red'); // 执 行 功能 方法 





也 可 以 写成 如 下 形式 : 


jQuery (function () {}); 
jQuery (#box') ; 
jQuery ('#box') .css ('color','red'’); 


jQuery() 方 法 有 7 个 重 载 ， 分 别 如 下 。 





(1) jQuery) 
jQuery() 方 法 返回 一 个 空 的 jQuery 对 象 。 在 jQuery 1.4 版 本 之 前 ， 该 方法 会 返 
Document 节点 的 对 象 ， 但 是 在 该 版 本 之 后 ， 则 返回 一 个 空 jQuery 对 象 。 





互 











(2) jQuery(elements) 
jQuery(elements) 方 法 实现 将 一 个 或 多 个 DOM 元 素 转化 为 jQuery 对 象 或 者 集合 的 功能 。 


(3) jQuery(callback) 

jQuery(callback) 方 法 等 价 于 jQuery(document).ready(callback)， 主 要 用 来 实现 绑 定 在 DOM 
文档 载 入 完成 后 执行 的 方法 。 

(4) jQuery(expression,[context]) 

jQuery(expression,[contextj) 方 法 接收 一 个 包含 jQuery 选择 器 的 字符 串 ， 在 具体 执行 时 ， 
会 使 用 传 入 的 字符 串 去 匹配 一 个 或 多 个 元 素 。 


(5) jQuery(html) 

jQuery(html) 方 法 具体 执行 时 ， 会 根据 传 入 的 html 标志 代码 ， 动 态 创建 由 jQuery 对 象 封 
装 的 DOM 元 素 。 

(6) jQuery(html,props) 

jQuery(html,props) 方 法 有 具体 执行 时 ， 不 仅 会 根据 传 入 的 html 标志 代码 动态 创建 由 jQuery 
对 象 封装 的 DOM 元 素 ， 还 会 设置 该 DOM 元 素 的 属性 、 事 件 等 。 

(7) jQuery(html,[ownerDocument]) 

jQuery(html,[ownerDocument]) 方 法 具体 执行 时 ， 不 仅 会 根据 传 入 的 html 标志 代码 动态 创 
建 由 jQuery 对 象 封装 的 DOM 元 素 ， 还 会 指定 该 DOM 元 素 所 在 的 文档 。 

了 解 了 jQuery 库 的 核心 方法 ， 接 着 需要 熟悉 jQuery 代码 的 风格 ， 请 看 下 面 的 代码 : 

$('#box') .css('color', 'red'); // 执 行 功能 方法 

在 执行 功能 方法 的 时 候 ， 其 实 css0 这 个 功能 方法 并 不 是 直接 被 jQuery 对 象 调用 执行 ， 而 
是 先 获 取 元 素 后 ， 返 回 某 个 对 象 再 调用 css()。 

不 过 值得 注意 的 是 ， 执 行 了 cssO 这 个 功能 方法 后 ， 最 终 返 回 的 还 是 jQuery 对 象 。 也 就 是 
说 ，jQuery 的 代码 模式 为 连 绥 方 式 ， 可 以 不 停 地 连续 调用 功能 方法 ， 请 看 下 面 的 代码 : 
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$('#box') .css('color' 'red') .css('font-size','50px'); // 连 缀 


最 后 ，jQuery 中 的 代码 注释 与 JavaScript 语言 中 保持 一 致 ， 即 有 两 种 最 常用 的 注释 ， 分 
别 为 : 


单行 注释 : "//。.。" 
多 行 注释 下 ?7 so 


18.1.2 jQuery 库 延 迟 等 待 加 载 模式 


在 jQuery 程序 代码 中 ， 为 了 让 方法 在 浏览 器 加 载 完 网 页 后 执行 ， 一 般 会 使 用 “$O” 将 方 
法 进行 首尾 包 里 ， 即 $(function0{})。 为 什么 必须 要 包 里 所 要 执行 的 方法 昵 ? 

这 是 因为 jQuery 代码 文件 是 在 <body> 标 签 元 素 之 前 加 载 的 ， 而 jQuery 代码 文件 里 的 方 
法 一 般 需要 操作 DOM 元 素 。 为 了 让 上 述 方法 能 够 正常 执行 ， 必 须 等 待 所 有 的 DOM 元 素 加 
载 后 才能 进行 元 素 操作 ， 于 是 就 需要 通过 “$0” 包 衷 方法 来 实现 延迟 等 待 加 载 功能 。 

在 JavaScript 原生 代码 里 ， 原 本 是 通过 load 事件 来 实现 延迟 等 待 加 载 的 ， 有 具体 代码 如 


window.onload=function(){}; //JavaScript 等 待 加 载 
在 jQuery 代码 里 ， 为 了 实现 上 述 功 能 ， 则 需要 通过 使 用 代码 : 

$ (document) .ready (function(){}); //jQuery 等 待 加 载 
上 述 代码 可 以 简写 为 : 

$ (function() {}) //jQuery 等 待 加 载 


那么 上 述 两 种 等 待 加 载 方式 有 什么 区 别 呢 ? 具体 区 别 如 表 18-1 所 示 。 
表 18-1 延迟 等 待 加 载 的 区 别 





选项 window.onload $(document).ready() 





执行 时 机 | 必须 等 待 网 页 全 部 加 载 完 毕 ， 然 后 再 执行 包 右 代码 | 加 载 完毕 ， 就 能 执行 包 囊 的 代码 
执行 次 数 | 只 能 执行 一 次 ， 如 果 执 行 第 二 次 ， 那 么 第 一 次 的 执 | 可 以 执行 多 次 ， 第 N 次 都 不 会 被 上 一 
行 会 被 覆盖 次 覆盖 
| 简写 方案 | 无 S$(function|) {}) | 


在 实际 应 用 中 ， 很 少 直接 使 用 window.onload 事件 来 实现 延迟 等 待 加 载 ， 这 是 因为 该 事 
件 所 关联 的 方法 需要 等 待 图 片 之 类 的 大 型 元 素 加 载 完 毕 后 才能 执行 。 最 令 人 头疼 的 就 是 网 速 
较 慢 的 情况 下 ， 页 面 已 经 全 面 展 开 ， 图 片 还 在 缓慢 加 载 ， 这 时 页 面 上 所 有 的 JavaScript 交互 
功能 全 部 处 在 假死 状态 ， 并 且 只 能 执行 单 次 ， 这 在 多 次 开发 和 团队 开发 中 会 带 来 困难 。 
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18.1.3 jQuery 对 象 与 DOM 对 象 间 的 转换 


jQuery 对 象 也 称 为 “jQuery 包装 集 ”， 是 jQuery 库 特 有 的 对 象 。 该 对 象 其 实 就 是 一 个 
“类 ”， 不 仅 封装 了 许多 方法 ， 而 且 可 以 动态 地 通过 加 载 插件 扩展 类 的 功能 。 那 么 如 何 获 取 
jQuery 对 象 呢 ? 非常 简单 ， 可 通过 下 面 的 代码 实现 : 


alert ($()); // 返 回 jouery 对 象 
alert ($('# cjgong1')); // 返 回 id 值 为 cjgongl 的 jQuery 对 象 


可 以 发 现 ，jQuery 对 象 就 是 用 jQuery 类 库 中 选择 器 返回 的 对 象 。 
所 谓 DOM 对 象 ， 就 是 使 用 原生 JavaScript 代码 获得 的 对 象 ， 下 面 的 代码 获取 DOM 对 象 : 
alert (document .getElementById("cjgong1"));  // 返 回 id 值 为 cjgongl 的 DOM 对象 
对 于 jQuery 库 来 说 ，jQuery 对 象 非常 重要 ， 因 为 除 jQuery 工具 方法 之 外 ，jQuery 的 操作 
都 从 jQuery 对 象 开 始 。 即 只 有 获取 jQuery 对 象 后 ， 才 可 以 使 用 jQuery 库 所 提供 的 方法 。 例 
如 jQuery 对 象 上 有 一 个 获取 元 素 内 HTML 代码 的 方法 html0， 要 使 用 此 方法 ， 首 先 要 获取 
jQuery 对 象 ， 请 看 下 面 的 代码 : 
$("#cjgong2") .html (); // 返 回 id 为 cjgong2 的 元 素 ， 然 后 调用 jQuery 对 象 的 方法 html () 
通过 DOM 对 象 也 可 以 实现 该 功能 ， 上 述 代码 等 价 于 : 
document .getElementById ("cjgong2") .innerHTML; // 返 回 id 为 cjgong2 的 元 素 内 的 HTML 代码 
可 以 发 现 ， 在 jQuery 对 象 中 无 法 调用 DOM 对 象 的 任何 方法 ， 同 样 在 DOM 对 象 中 也 无 
法 调用 jQuery 对 象 ， 不 过 jQuery 库 提供 的 方法 包含 了 所 有 的 DOM 操作 。 但 是 对 于 初学 者 来 
说 ， 无 法 一 开始 就 记 住 jQuery 库 的 所 有 方法 ， 有 很 长 一 段 时 间 需 要 使 用 jQuery 库 方 法 配合 原 
始 的 DOM 方法 进行 开发 。 因 此 实现 两 种 对 象 的 转化 是 很 有 必要 的 。 
1. jQuery 对 象 转换 成 DOM 对 象 


jQuery 对 象 是 一 个 特殊 的 数组 对 象 ， 即 使 只 有 一 个 元 素 ，jQuery 对 象 仍然 是 一 个 数组 。 
之 所 以 说 其 特殊 ， 是 因为 实际 上 jQuery 对 象 是 包含 一 个 数组 对 象 和 各 种 方法 的 类 。 而 jQuery 
对 象 的 数组 里 保存 的 是 DOM 对 象 ， 因 此 可 以 通过 索引 的 方式 将 jQuery 对 象 转换 成 DOM 对 
象 ， 具 体 语法 如 下 : 


[index] 
下 面 的 代码 通过 索引 的 方式 实现 jQuery 对 象 向 DOM 对 象 的 转换 : 


var $cr=$("#cjgong3"); // 获 取 jquery 对 象 Scr 
Var cr = $cr[0]s // 将 jquery 对 象 Scr 转换 成 dom 对 象 


除 通过 上 述 方式 实现 转换 之 外 ，jQuery 对 象 还 专门 提供 了 一 个 方法 将 jQuery 对 象 转 换 成 
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DOM 对 象 ， 具 体 语 法 如 下 : 


get (index) 
下 面 的 代码 通过 索引 的 方式 实现 jQuery 对 象 向 DOM 对 象 的 转换 : 
var $cr=$("#cjgong3"); // 获 取 jquery 对 象 Scr 
// 将 jquery 对 象 Scr 转换 成 dom 对 象 


Var cr=$cr.get (0) 7 


2. DOM 对 象 转换 成 jQuery 对 象 
对 于 DOM 对 象 ， 只 需要 用 $0 把 DOM 对 象 包装 起 来 ， 即 可 获得 一 个 jQuery 对 象 ， 具 体 


语法 为 : 
$ (dom 对 象 ) 
下 面 的 代码 实现 DOM 对 象 向 jQuery 对 象 的 转换 : 


var cr=document .getElementById("cjgong3"); // 获 取 dom 对 象 
// 将 dom 对 象 cr 转换 成 jquery 对 象 


var $cr = $(cr); 
查看 官方 网 站 ， 可 以 发 现 $(elements) 中 的 elemients 参数 还 可 以 是 jQuery 对 象 ， 虽 然 将 一 
个 jQuery 对 象 再 次 转换 成 jQuery 对 象 没 有 意义 。 但 是 在 开发 具体 项 目 时 ， 如 果 无 法 确定 一 个 
对 象 的 类 型 是 jQuery 对 象 还 是 DOM 对 象 ， 可 以 调用 $0 进行 转化 ， 这 样 可 以 保证 此 对 象 一 定 
是 jQuery 对 象 。 
建议 : 在 具体 开发 项 目 时 ， 如 果 获 取 的 对 象 是 jQuery 对 象 ， 那 么 在 变量 标识 符 前 面 加 上 
$， 这 样 容易 识别 出 哪些 是 jQuery 对 象 。 可 通过 下 面 的 代码 创建 jQuery 对 象 : 


var $variable = jquery 对 象 ; 


18.2 基础 选择 器 


jQuery 库 最 核心 的 组 成 部 分 就 是 选择 器 ， 所 有 DOM 操作 、 事 件 操作 、AJAX 操作 都 离 
不 开 它 。jQuery 库 的 选择 器 继承 了 CSS 的 语法 ， 可 以 对 DOM 元 素 的 标签 名 、 属 性 名 、 状 态 
等 进行 快速 而 准确 的 选择 ， 并 且 不 必 担 心 浏览 器 的 兼容 性 ， 同 时 还 具有 一 定 的 容错 性 。 
jQuery 选择 器 除 实现 了 CSS 1~CSS3 的 大 部 分 规则 之 外 ， 还 实现 了 一 些 自 定义 的 选择 器 ， 用 


于 各 种 特殊 状态 的 选择 。 








18.2.1 简单 选择 器 
jQuery 选择 器 几乎 支持 CSS 的 所 有 选择 器 语法 ， 这 种 对 CSS 选择 器 语法 的 支持 ， 使 得 
发 人 员 的 学 习 成 本 为 零 ， 同 时 在 增强 自己 网 站 时 ， 也 不 必 考 虑 浏览 器 的 兼容 性 。 
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与 CSS 选择 器 语法 一 致 ，jQuery 也 支持 3 种 基本 的 选择 器 ， 如 表 18-2 所 示 。 
表 18-2 简单 选择 符 











选择 器 CSS 语法 jQuery 语法 描述 
ID 选择 器 #box {} SC#box) 获取 一 个 ID 为 box 元 素 的 DOM 对象 
类 (class) 选 择 器 | .box 全 S$('.box') 获取 所 有 class 为 box 的 DOM 对 象 | 





1. 标签 选择 器 
标签 选择 器 (element) 用 于 选择 HTML 页 面 中 已 有 的 标签 元 素 ， 又 称 为 元 素 选 择 器 ， 语 
法 格式 如 下 : 
$ ("element") 
其 中 ， 参 数 element 表示 所 要 查找 的 HTML 标签 名 。 
下 面 的 实例 设置 <div> 标 签 里 的 内 容颜 色 为 红色 ， 其 HTML 代码 如 下 : 


<body> 
<div> 标 签 选择 器 </div> 


</body> 
如 果 通 过 CSS 选择 器 方式 来 实现 ， 则 需要 在 CSS 文件 里 编写 如 下 代码 ; 
div { 


color:red; 
1 


如 果 通 过 jQuery 选择 器 方式 来 实现 ， 则 需要 在 js 文件 里 编写 如 下 代码 : 
$('div').css('color', ‘red'); 
上 述 代码 中 ， 字 符 串 div 表示 HTML 页 面 中 已 有 的 标签 元 素 <div>。 标 签 选择 器 获取 元 素 
的 方式 不 但 高 效 ， 而 且 获 取 到 的 是 该 元 素 的 整个 集合 。 
查看 HTML 页 面 ， 所 有 <div> 标 签 里 的 内 容 都 以 红色 显示 ， 运 行 效果 如 图 18-1 所 示 。 


) 常规 选择 器 -ozilla Firefoz 
文件 四 篇 铝 人 ) 查看 WD 历史 G) 书签 和 工具 CD) 帮助 0 
从 规 迁 这 器 [El 
@il// OO Cl 图- 月 合 |> 会 








图 18-1 运行 效果 
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2. ID 选择 器 

ID 选择 器 (id) 用 于 选择 一 个 具有 id 属性 的 标签 元 素 ， 语 法 格式 如 下 : 

$ ("#id") 

其 中 ， 参 数 id 表示 所 要 查找 元 素 的 id 属性 值 ， 一 定 注意 要 在 id 前 面 加 上 “#” 字 符 。 

下 面 设置 HTML 页 面 中 具有 id 属性 值 为 box 的 标签 元 素 里 的 内 容颜 色 为 红色 ， 其 
HTML 代码 如 下 : 


<body> 
<div id='box'>ID 选择 器 </div> 
</body> 
如 果 通 过 CSS 选择 器 方式 来 实现 ， 则 需要 在 CSS 文件 里 编写 如 下 代码 : 


#box { 
color:red; 


1 

如 果 通 过 jQuery 选择 器 方式 来 实现 ， 则 需要 在 js 文件 里 编写 如 下 代码 : 

S(tbox') .cass('color'r "red)s 

上 述 代 码 中 ， 字 符 串 “#box” 中 的 box 表示 所 要 查找 标签 元 素 的 id 属性 值 ，ID 选择 器 获 
取 元 素 的 方式 不 但 高 效 ， 而 且 其 结果 只 能 是 一 个 标签 元 素 。 这 是 因为 在 HTML 页 面 中 ，id 值 
是 唯一 的 。 

查看 HTML 页 面 ，id 属性 值 为 box 的 标签 元 素 里 的 内 容 以 红色 显示 ， 运 行 效果 如 图 18-2 
所 示 。 


) 常规 选择 器 - 和 ozrilla Firefox 


ltl 
各 四 file/// 加 CI 图 -PP Ol- 会 和 -+ 


较 访问 最 多 全 ] 新 手 上 路 全) jquery01. htnl 
ID 选择 器 





图 18-2 运行 效果 


3. 类 选择 器 
类 选择 器 (class) 用 于 选择 具有 class 属性 的 标签 元 素 ， 语 法 格式 如 下 : 


$(".class") 
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其 中 ， 参 数 class 表示 所 要 查找 元 素 的 class 属性 值 ， 一 定 注 意 要 在 class 前 面 加 上 “.” 字 
符 。 

下 面 设置 HTML 页 面 中 具有 class 属性 值 为 box 的 标签 元 素 里 的 内 容颜 色 为 红色 ， 其 
HTML 代码 如 下 : 

<body> 

<div class='box' > 类 选择 器 </div> 


</body> 


如 果 通 过 CSS 选择 器 方式 来 实现 ， 则 需要 在 CSS 文件 里 编写 如 下 代码 : 


-box 
color:red; 





} 
如 果 通 过 jQuery 选择 器 方式 来 实现 ， 则 需要 在 js 文件 里 编写 如 下 代码 : 
$i(',box').css('color's ‘red'); 
上 述 代 码 中 ， 字 符 串 “.box” 中 的 box 表示 所 要 查找 标签 元 素 的 class 属性 值 ， 类 选择 器 
获取 元 素 的 方式 不 但 高 效 ， 而 且 其 结果 是 一 个 集合 。 


查看 HTML 页 面 ，class 属性 值 为 box 的 标签 元 素 里 的 内 容 以 红色 显示 ， 运 行 效果 如 图 
18-3 所 示 。 


) 常规 选择 器 


过 | 
c][ 图 -P| @j- 会 9)- ~ 


DD jqueryol. htal 

















图 18-3 运行 效果 


18.2.2 进 阶 选择 器 
前 面 介绍 了 jQuery 库 中 最 简单 的 3 种 选择 器 ， 在 该 类 型 选择 器 的 基础 上 ，jQuery 库 仿照 
CSS 语法 又 支持 群 组 选择 器 、 后 代 选 择 器 和 通配符 选择 器 ， 这 些 选 择 器 统称 为 进 阶 选择 器 。 
与 CSS 选择 器 语法 一 致 ，jQuery 也 支持 3 种 进 阶 选择 器 ， 如 表 18-3 所 示 。 
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表 18-3 进 阶 选择 符 

























选择 器 CSS 语法 jQuery 语法 描述 

群 组 选择 器 “| span,em,.box{} S$('span,em,.box') 获取 多 个 选择 器 的 DOM 对 象 

后 代 放权 器 
通 配 选 择 器 获取 所 有 元 素 标签 的 DOM 对 象 








1. 和 群 组 选择 器 
群 组 选择 器 用 于 选择 所 指定 选择 器 组 合 的 结果 ， 又 称 为 多 元 素 选择 器 ， 语 法 格式 如 下 : 
$ ("selectorl, selector2, select3,......, selectorN") 
其 中 ， 参 数 selector 表示 有 效 的 任意 简单 选择 器 。 
下 面 设置 HTML 页 面 中 所 有 <div> 标 签 元 素 、<p> 标 签 元 素 和 <strong> 标 签 元 素 里 的 内 容 
颜色 为 红色 ， 其 HTML 代码 如 下 : 


<body> 
<div >div</div> 


</body> 
如 果 通 过 CSS 选择 器 方式 来 实现 ， 则 需要 在 CSS 文件 里 编写 如 下 代码 : 


div,p, strong{ 
color:red; 
} 


如 果 通 过 jQuery 选择 器 方式 来 实现 ， 则 需要 在 js 文件 里 编写 如 下 代码 : 

$('div,p,strong') .css('color', ‘'red'); 

上 述 代 码 中 ， 字 符 串 div 表示 HTML 页 面 中 己 有 的 标签 元 素 <div>， 字 符 串 p 表 示 HTML 
页 面 中 已 有 的 标签 元 素 <p>， 字 符 串 strong 表示 HTML 页 面 中 已 有 的 标签 元 素 <strong>。 群 组 
选择 器 是 选择 不 同 元 素 的 有 效 方法 ， 根 据 实 际 需要 ， 可 以 指定 任意 多 个 简单 选择 器 合并 成 一 
个 结果 集 。 

查看 HTML 页 面 ， 所 有 <div> 标 签 元 素 、<p> 标 签 元 素 和 <strong> 标 签 元 素 里 的 内 容 都 以 
红色 显示 ， 运 行 效果 如 图 18-4 所 示 。 
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) 群 组 选择 舌 一 ozilla Firefox 


strong strong strong 





图 18-4 运行 结果 


2. 后代 选 择 器 

后 代 选 择 器 用 于 在 指定 祖先 元 素 下 匹配 所 有 的 后 代 元 素 ， 语 法 格式 如 下 : 

$ ("ancestor descendant") 

其 中 ， 参 数 ancestor 是 任意 有 效 的 简单 选择 器 ， 为 指定 的 祖先 元 素 ; 参数 descendant 也 
-个 简单 选择 器 ， 用 于 筛选 祖先 元 素 的 后 代 元 素 。 两 个 参数 之 间 用 空格 隔 开 。 

在 jQuery 库 里 为 子 选择 器 专门 提供 了 一 个 等 价 的 方法 fnd0， 使 用 语法 格式 如 下 : 


同 


$ ("ancestor") .find ("descendant") 
下 面 设置 第 一 个 和 第 二 个 关于 首页 超级 链接 的 内 容颜 色 为 红色 ， 其 HTML 代码 如 下 : 


<body> 

<ul> 

<1i><a href='###'> 首 页 </a></1i> 
<1i><a href='###'> 首 页 </a></1i> 
</ul> 

<a href='### 1 > 首页 </a> 

<a href='###'> 首 页 </a> 

</body> 


如 果 通 过 CSS 选择 器 方式 来 实现 ， 则 需要 在 CSS 文件 里 编写 如 下 代码 : 


ul li at 
color:red; 





} 
如 果 通 过 jQuery 选择 器 方式 来 实现 ， 则 需要 在 js 文件 里 编写 如 下 代码 : 
Si I a ESSIeCOLOE “red )s 


上 述 代 码 中 ， 字 符 串 “ul lia” 表 示 <ul> 标 签 元 素 下 <li> 标 签 元 素 下 的 <a> 标 签 元 素 。 后 代 
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选择 器 同样 是 选择 不 同 元 素 的 有 效 方法 ， 不 过 需要 注意 的 是 ， 后 代 元 素 可 能 是 祖先 元 素 的 子 
元 素 、 孙 元 素 、 重 孙 元 素 等 。 

查看 HTML 页 面 ， 第 一 个 和 第 二 个 关于 首页 超级 链接 的 内 容 都 以 红色 显示 ， 运 行 效果 如 
图 18-5 所 示 。 





) 后 代 选 择 器 - 和 ozrilla Firefoz 
妨 往 区) 查看 历史 G) 书签 @) 工具 CD) 帮助 如 





18-5 运行 结果 


3. 通配符 选择 器 
通配符 选择 器 用 于 匹配 所 有 的 元 素 ， 语 法 格式 如 下 : 
Sg (nxn) 


其 中 ， 字 符 串 “* ”表示 匹配 所 有 的 元 素 。 
下 面 设置 HTML 页 面 中 所 有 元 素 里 的 内 容颜 色 为 红色 ， 其 HTML 代码 如 下 : 


<body> 

<ul> 

<1i><a href='###'> 首 页 </a></1i> 
<1i><a href= '### "> 首页 </a></1i> 
</ul> 

<a href='###'> 首 页 </a> 

<a href= '### 1 > 首页 </a> 
<p> 首 页 </p> 

<p> 首 页 </p> 

<span> 首 页 </span> 
<span> 首 页 </ span> 

</body> 


如 果 通 过 CSS 选择 器 方式 来 实现 ， 则 需要 在 CSS 文件 里 编写 如 下 代码 : 


本 
color:red; 





} 


如 果 通 过 jQuery 选择 器 方式 来 实现 ， 则 需要 在 js 文件 里 编写 如 下 代码 : 


Sol ooLor, EOG)y 
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上 述 代码 中 ， 字 符 串 “*” 表 示 页 面 中 所 有 的 元 素 。 通 配 符 选择 器 主要 用 于 查找 所 有 的 元 
素 ， 以 便于 将 这 些 元 素 进行 样式 的 统一 ， 例 如 字体 、 颜 色 等 。 
查看 HTML 页 面 ， 所 有 元 素 里 的 内 容 都 以 红色 显示 ， 运 行 效果 如 图 18-6 所 示 。 


) 通配符 选择 器 - Wozilla Firefoz 
文件 四 编 可 EE) 查看 W) 历史 @) 书签 名 ”工具 四 攻 助 0 
国 

=- @file:/ 加 cl|| 图 -5 月 | 二 | ~- 会 


园 访问 最 多 口 ] 新 手 上 路 jgreryot hel 





18-6 运行 结果 


在 具体 开发 项 目 时 ， 通 配 选 择 器 一 般 不 常用 ， 尤 其 是 在 大 的 通 配 上 ， 如 $(*)。 这 种 使 用 
方法 效率 很 低 ， 影 响 性 能 ， 建 议 尽 可 能 少 用 。 之 所 以 效率 很 低 ， 是 因为 $8(*) 代 码 会 查找 页 面 
中 所 有 的 对 象 。 

下 面 的 实例 实现 查看 页 面 中 一 共有 多 少 个 元 素 ， 其 HTML 代码 如 下 : 


1。 <html> 

2. <head> 

3 <metacharset=utf-8" /> 

4. <title> 通 配 符 选择 器 </title> 

5 <script type="text/javascript" src="jquery/jquery-3.2.1.js"></script> 
6. <script type="text/javascript" src="javascript/jquery.js"></script> 
二 <link rel="stylesheet" href="styles/style.css" type="text/css" /> 
8. </head> 

9。 <body> 

10. <ul> 

Un <1i><a href='###'> 首 页 </a></1i> 

2 <1i><a href= '###1> 首 页 </a></1i> 

13。 </ul> 

4 <a href='###'> 首 页 </a> 


5 <a href='###'> 首 页 </a> 
16. <p> 首 页 </p> 

En <p> 首 页 </p> 

38 <span> 首 页 </span> 


19. <span> 首 页 </span> 
2 </body> 
2 </html> 


在 上 述 代码 中 ， 一 共 包含 19 个 元 素 对 象 ， 分 别 为 <html>、<head>、<meta> 等 标签 元 素 
对 象 。 
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如 果 要 查看 上 述 页 面 中 的 对 象 个 数 ， 则 需要 在 js 文件 里 编写 如 下 代码 : 
alert ($('*"').size()); 


查看 HTML 页 面 ， 对 话 框 中 所 显示 的 数字 19 表示 该 页 面 一 共有 19 个 元 素 对 象 ， 运 行 效 
果 如 图 18-7 所 示 。 


) 通配符 迁 择 器 一 Wozilla Firefor 





图 18-7 运行 结果 


18.2.3 高 级 选择 器 


对 于 DOM 节点 对 象 的 选择 ， 前 面 介绍 的 6 种 选择 器 完全 可 以 胜任 。 但 是 随 着 CSS 版 本 
的 更 新 ， 专 门 为 一 些 特殊 情况 提供 了 一 些 选择 器 ， 例 如 子 选 择 器 、next 选择 器 和 nextAll 选择 
器 ， 它 们 统称 为 高 级 选择 器 。 由 于 这 些 选择 器 对 IE6 等 低 版 本 浏览 器 不 支持 ， 所 以 不 具备 通 
用 性 。 但 是 随 着 jQuery 库 的 兼容 ， 这 些 选择 器 的 使 用 频率 也 越 来 越 高 。 

与 CSS 选择 器 语法 一 致 ，jQuery 也 支持 3 种 高 级 选择 器 ， 如 表 18-4 所 示 。 


表 18-4 高 级 选择 器 


| 时。 |css 调 法 iQue 法 | 





了 沁 拓 只 区 了 了 关节 上 的 多 个 DOM 对 条 


next 选 择 器 divtp 个 Sodiv+p) 只 获取 某 节点 后 一 个 同 级 DOM 对 象 
| exAn 选 择 器 “| divp 0 SCdivp) 获取 某 节点 后 所 有 同 级 DOM 对 象 | 
1. 子 选 择 器 








子 选 择 器 用 于 在 指定 的 父 元 素 下 查找 该 元 素 下 面 的 所 有 子 元 素 ， 语 法 格式 如 下 : 


$ ("parent>child") 


其 中 ， 参 数 parent 表示 有 效 的 任意 选择 器 ，child 同样 也 是 一 个 选择 器 ， 并 且 它 是 第 一 个 
选择 器 的 子 元 素 ， 两 个 参数 之 间 用 符号 “>” 隔 开 。 


303 


在 jQuery 库 里 为 子 选择 器 专门 提供 了 一 个 等 价 的 方法 children0， 使 用 语法 格式 如 下 : 

$ ("parent") .children("child") 

下 面 设置 HTML 页 面 中 id 值 为 box 的 div 元 素 里 的 p 元 素 内 容颜 色 为 红色 ， 其 HTML 代 
码 如 下 : 


<body> 
<div id='box'> 
<p>p</p> 





<div> 
<p>p</p> 


</div> 
</div> 
</body> 
如 果 通 过 CSS 选择 器 方式 来 实现 ， 则 需要 在 CSS 文件 里 编写 如 下 代码 : 
div { 


#box>p; 
} 


如 果 通 过 jQuery 选择 器 方式 来 实现 ， 则 需要 在 js 文件 里 编写 如 下 代码 : 
$('#box>p') .css('color', 'red'); 
上 述 代码 中 ， 字 符 串 “#box” 表 示 HTML 页 面 中 id 值 为 box 的 标签 元 素 <div>， 而 字符 
串 “>p” 表 示 所 有 儿子 标签 元 素 <p>。 也 可 以 通过 如 下 代码 实现 上 述 功 能 : 
$('#box') .children('p').css('color', 'red'); 


查看 HTML 页 面 ， 运 行 效果 如 图 18-8 所 示 。 


) 子 选择 器 - Mozilla Firefox 
文件 四 鲍 得 @) 查看 W) 历史 G) 书签 中 工具 中 帮助 0 
子 达 择 器 IE 
f ®t 加 cI 图 -Pj @l>- 会 多 I 


罗 访问 晤 多 新手 上 路 全) jquery0l htal 





图 18-8 运行 结果 
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2. next 选择 器 

next 选择 器 也 叫 紧 邻 同辈 元 素 选择 器 ， 即 用 于 匹配 紧邻 指定 元 素 的 同辈 元 素 ， 语 法 格式 
如 下 : 

$ ("previnext") 

其 中 ， 参 数 prev 是 任意 有 效 的 选择 器 ， 参 数 next 也 是 一 个 选择 器 ， 用 于 匹配 紧 接 prev 
元 素 后 的 第 一 个 元 素 。 两 个 参数 之 间 使 用 “+” 符 号 隔 开 。 

在 jQuery 库 里 为 子 选择 器 专门 提供 了 一 个 等 价 的 方法 next0， 使 用 语法 格式 如 下 : 

$(Prev") .next ("next") 

下 面 设置 HTML 页 面 中 内 容 为 p5 的 标签 元 素 以 红色 显示 ， 其 HTML 代码 如 下 : 


<body> 
<p>p1l</p> 
<p>p2</p> 
<p>p3</p> 
<div id='box'> 
<p>p4</p> 

</div> 
<p>p5</p> 
<p>p6</p> 
<p>p7</p> 
</body> 


如 果 通 过 CSS 选择 器 方式 来 实现 ， 则 需要 在 CSS 文件 里 编写 如 下 代码 : 


#box+p { 
color:red; 


F 
如 果 通 过 jQuery 选择 器 方式 来 实现 ， 则 需要 在 js 文件 里 编写 如 下 代码 : 
SRboxtip') .csst'colors red')s 


上 述 代码 中 ， 字 符 串 “#box” 表 示 HTML 页 面 中 id 值 为 box 的 标签 元 素 <div>， 而 字符 
串 “+p” 表 示 第 一 个 同辈 元 素 <p>。 也 可 以 通过 如 下 代码 实现 上 述 功 能 : 
$('#box') .next ('p').css('color', 'red'); 


查看 HTML 页 面 ， 内 容 为 p5 的 标签 元 素 以 红色 显示 ， 运 行 效果 如 图 18-9 所 示 。 
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18-9 运行 结果 


3. nextALL 选择 器 
nextAll 选择 器 也 叫 相 邻 同辈 元 素 选择 器 ， 即 用 于 匹配 指定 元 素 的 所 有 同辈 元 素 ， 语 法 格 


式 如 F: 


$ ("prev~ siblings") 


其 中 ， 参 数 prev 是 任意 有 效 的 选择 器 ， 参 数 siblings 也 是 一 个 选择 器 ， 用 于 匹配 prev 元 


素 后 的 所 有 同辈 元 素 。 两 个 参数 之 间 使 用 “~” 符 号 隔 开 。 
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在 jQuery 库 里 为 子 选 择 器 专门 提供 了 一 个 等 价 的 方法 nextAll)， 使 用 语法 格式 如 下 : 
$ ("prev") .nextAll ("next") 
下 面 设置 HTML 页 面 中 内 容 为 p5、p6 和 p7 的 标签 元 素 以 红色 显示 ， 其 HTML 代码 如 下 : 


<body> 
<p>p1l</p> 
<p>p2</p> 
<p>p3</p> 
<div id='box'> 
<p>p4</p> 

</div> 
<p>p5</p> 
<p>p6</p> 
<p>p7</p> 
</body> 


如 果 通 过 CSS 选择 器 方式 来 实现 ， 则 需要 在 CSS 文件 里 编写 如 下 代码 : 


#box~p { 
color:red; 





如 果 通 过 jQuery 选择 器 方式 来 实现 ， 则 需要 在 js 文件 里 编写 如 下 代码 : 
DOPDIRCeSECeLOCAYEGG DA 


字符 串 “#box” 表 示 HTML 页 面 中 id 值 为 box 的 标签 元 素 <div>， 而 字符 串 “~p” 表 示 
所 有 同辈 标签 元 素 <p>。 也 可 以 通过 如 下 代码 实现 上 述 功 能 


$('#box') .nextAll ('p') .css('color', 'red'); 


查看 HTML 页 面 ， 内 容 为 p5、p6 和 p7 的 标签 元 素 以 红色 显示 ， 运 行 效果 如 图 18-10 所 示 。 





图 18-10 运行 结果 


上 面 所 描述 的 高 级 选择 器 主要 用 来 解决 DOM 节点 对 象 的 父子 关系 和 兄弟 关系 ， 其 实 
CSS 语法 里 还 专门 提供 了 一 种 针对 特殊 属性 元 素 的 选择 器 。 同 样 由 于 该 选择 器 对 IE 6 等 低 版 
本 浏览 器 不 支持 ， 所 以 不 具备 通用 性 。 但 是 随 着 jQuery 库 的 兼容 ， 这 种 选择 器 的 使 用 频率 越 


18. 3 过 过 滤 选 选择 器 


除 上 述 章节 所 介绍 的 选择 器 之 外 ，CSS 语法 中 还 存在 一 种 叫 作伪 类 的 选择 器 ， 这 些 选 择 
器 对 IE 6 等 低 版 本 浏览 器 同样 不 支持 ， 所 以 不 具备 通用 性 。 但 在 jQuery 库 里 专门 针对 CSS 
的 伪 类 语法 设置 了 过 滤 选 择 器 ， 简 称 过 滤器 。 随 着 jQuery 库 的 兼容 ， 过 滤 选 择 器 的 使 用 频率 





18.3.1 jQuery 所 支持 的 过 滤器 


与 CSS 中 的 伪 类 选择 器 语法 非常 类 似 ，jQuery 库 所 支持 的 所 有 过 滤器 都 以 冒号 (: ) 
头 。 按 照 过 滤 规 则 ， 过 滤器 可 以 分 为 基本 过 滤器 、 内 容 过 滤器 、 可 见 性 过 滤器 、 子 元 素 过 滤 
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器 、 表 单 对 象 属性 过 滤器 、 表 单 过 滤器 和 其 他 过 滤器 。 
1. 基本 过 滤器 
jQuery 支持 11 种 基本 过 滤器 ， 详 情 如 表 18-5 所 示 。 
表 18-5 基本 过 滤器 





























过 滤器 名 jQuery 语法 说 明 返回 
:first SCli:first) 选取 第 一 个 元 素 单个 元 素 
:last SCli:last) 选取 最 后 一 个 元 素 
:not(selector) SCli:not(red)) 选取 class 不 是 red 的 看 元素 
:even SCli:even) 选择 索引 〈0 开始 ) 是 偶数 的 所 有 元 素 
:odd S$(li:odd') 选择 索引 〈0 开始 ) 是 奇数 的 所 有 元 素 
:eq(index) SCli:eq(2)) 选择 索引 〈0 开始 ) 等 于 index 的 元 素 
:gt(index) S$(li:gt(2)") 选择 索引 (0 开始 ) 大 于 index 的 元 素 
:lt(index) SCOlilt(2)) 选择 索引 〈0 开始 ) 小 于 index 的 元 素 
:header SC:header) 选择 标题 元 素 ，h1~h6 
:animated S$(:animated') 选择 正在 执行 动画 的 元 素 
:focus S$(':focus') 选择 当前 被 焦点 的 元 素 
2. 内 容 过 滤器 
jQuery 支持 4 种 内 容 过 滤器 ， 详 情 如 表 18-6 所 示 。 
表 18-6 内 容 过 滤器 
过 滤器 名 jQuery 语法 
:contains(text) S$(':contains("ycku.com")') 选取 含有 "ycku.com" 文 本 的 元 素 
:empty SCempty) 选取 不 包含 子 元 素 或 空 文本 的 元 素 
HasGeleaton 





:parent S$(':parent’) S$C:parent) 元 素 集合 
3. 可 见 性 过 滤器 
jQuery 支持 两 种 内 容 过 滤器 ， 详 情 如 表 18-7 所 示 。 


表 18-7 可 见 性 过 滤器 























过 滤器 名 jQuery 语法 说 明 返回 
:hidden SC:hidden) 选取 所 有 不 可 见 元 素 合 元 素 
:Visible SC:visible) 选取 所 有 可 见 元 素 合 元 素 
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4. 子 元 素 过 滤器 
jQuery 支持 4 种 子 元 素 过 滤器 ， 详 情 如 表 18-8 所 示 。 
表 18-8 子 元 素 过 滤器 


























过 滤器 名 jQuery 语法 说 明 返回 

:first-child S('li:first-child') 获取 每 个 父 元 素 的 第 一 个 子 元 素 集合 元 素 
:last-child SCli:lastchild) 获取 每 个 父 元 素 的 最 后 一 个 子 元 素 | 集合 元 素 
:only-child SCli:only-child) 获取 只 有 一 个 子 元 素 的 元 素 集合 元 素 
:nth-child(odd/even/eq(index)) | SCli:nth-child(even)) 获取 每 个 自 定 义 子 元 素 的 元 素 集合 元 素 





5. 表单 对 象 属性 过 滤器 
jQuery 支持 4 种 表单 对 象 属性 过 滤器 ， 详 情 如 表 18-9 所 示 。 
表 18-9 表单 对 象 属性 过 滤器 





过 滤器 名 jQuery 语法 


效 取 所 有 可 用 的 nwt 元 
区 了 所 有 不 可 用 的 ip 元 


| saeeed | SCseketopionseleeedy | 了 有 有 选中 的 选项 元 素 | 集合 元 素 
6. 表单 过 滤器 
jQuery 支持 10 种 表单 过 滤器 ， 详 情 如 表 18-10 所 示 。 
表 18-10 表单 过 滤器 






































过 滤器 名 jQuery 语法 解释 返回 

:input S$(":input") 获取 所 有 的 input 元 素 集合 元 素 
:text S$(":text") 获取 所 有 文本 框 集合 元 素 
:password $(":password") 获取 所 有 密码 框 集合 元 素 
:radio S$(":radio") 获取 所 有 单 选 按钮 集合 元 素 
:checkbox S$(":checkbox") 获取 所 有 复 选 框 集合 元 素 
:submit S$(":submit") 获取 所 有 提交 按钮 集合 元 素 
:image $(":image") 获取 所 有 图 像 域 集合 元 素 
:reset S$(":reset") 获取 所 有 重 置 按钮 集合 元 素 
:button $(":button") 获取 所 有 按钮 集合 元 素 
:file $(":file") 获取 所 有 文件 域 集合 元 素 
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7. 其 他 过 滤器 
除 上 述 过 滤器 之 外 ，jQuery 还 支持 一 些 其 他 过 滤器 ， 详 情 如 表 18-11 所 示 。 
表 18-11 其 他 过 滤器 











方法 名 jQuery 语法 说 明 返回 

is(s/o/e/f) SOliD.is(red) 传递 选择 器 、DOM、jQuery 对 象 或 是 方法 来 | 集合 元 素 
匹配 元 素 结合 

hasClass(class) SCli).eq(2).hasClass(red) | 其 实 就 是 is("."+class) 

slice(start,end) SCli).slice(0,2) 选择 从 start 到 end 位 置 的 元 素 ， 如 果 是 负 


数 ， 则 从 后 开始 


filter(s/o/e/f) SCliD.filter(red) 获取 上 标签 下 类 为 red 的 元 素 
end0 S$Cdiv).find(p).end0) 获取 当前 元 素 前 一 次 状态 


contents() S$('div').contents() 获取 某 元 素 下 面 所 有 元 素 节点 ， 包 括 文本 节 
点 ， 如 果 是 iframe， 则 可 以 查找 文本 内 容 








18.3.2 页 面 中 的 经 典 导航 条 


综合 使 用 上 面 章节 所 介绍 的 各 种 选择 器 ， 实 现 某 网 站 一 个 关于 “品牌 分 类 ”导航 条 的 展 
示 效 果 ， 用 户 进入 该 页 面 时 ， 品 牌 分 类 默认 效果 如 图 18-11 所 示 。 
) 页 面 中 经 典 导航 条 一 Wozilla Firefox 辕 占 加 | 


文件 中) 编辑 E) 查看 以 历史 GG) 书签 人 @ 工具 CT) 帮助) 
] 页 面 中 经 典 导 航 条 国 | 


€ il/Q 图 - 百 户 | 使 | 会 
国 访问 晤 多) 留言 1) 新 手 上 路 了》 jquery01. htal 





品牌 分 类 


佳能 (30440) ”过 尼 (27220) 
尼康 (17821/) 松下 


宣 士 (1d894) 柯达 
理光 (4114) 。 奥 林 (12205) 
里 国 者 (3091) 其 他 (7275) 

















图 18-11 “品牌 分 类 ”导航 条 


在 “品牌 分 类 ”导航 条 中 ， 单 击 “ 品 牌 分 类 ”标题 ， 可 以 伸缩 导航 条 的 内 容 ， 同 时 该 标 
题 中 的 提示 图 片 也 随 之 改变 ， 具 体 效 果 如 图 18-12 所 示 。 如 果 再 次 单 击 标题 ， 则 会 返 
图 18-11 所 示 的 效果 。 在 “品牌 分 类 ”导航 条 中 ， 单 击 “ 精 简 显 示 品 牌 ”超级 链接 时 ， 将 隐 
藏 指定 的 内 容 ， 同 时 该 “精简 显示 品牌 ”字样 变 成 “显示 全 部 品牌 ”如 图 18-13 所 示 ) ， 
单 击 “ 显 示 全 部 品牌 ”链接 时 ， 返 回 初始 状态 ， 并 改变 指定 显示 元 素 的 背景 色 。 


回 
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) 页 面 中 经 典 导航 条 - Mozilla Firefox 回回 四 
文件 四 编 缉 @) 查看 W) 历史 GG) 书签 外 工具 帮助 0 
页 面 中 经 典 导航 条 En 


€ Bs:11Q 氏 E 合 - 人 人 














) 页 面 中 经 典 导 航 条 一 ozilla Firefox 辐 回 司 较 访问 景 多 留言) 新手 上 路 jquery0l. htnl 
二 编辑 E) 查看 WD 历史 (5) 书签 @) 工具 GD) 帮助 叫 
| 站 页 面 中 经 典 导 骸 条 [+ [人 





€ Brill/QO Cl] 图 -下 仿 -会 佳能 (30440) ” 讲 尼 (27220) 三星 (20808) 
尼康 (17821) ”松下 (12289) ”卡西欧 (8242) 
其 它 (7275) 





加 访问 最 多 站 留言 新手 上 路 jqueryol htnl 





品牌 分 类 ’ 














图 18-12 单 击 标题 效果 18-13 隐藏 效果 


下 面 通过 应 用 jQuery 库 实现 经 典 导航 条 ， 具 体内 容 见 【范例 18-1】。 先 设计 一 个 页 面 ， 
具体 代码 如 下 : 


【范例 18-1 承载 js 文件 的 HTML 文件 】 






Li <body> 

六 <div id="divFrame"> 

3 <div class="clsHead"> 

2c <h3> 品 牌 分 类 </h3> 

5 <!-- 标 题名 称 --> 

Gs <span><img src="Images/a2.gif" alt=""/></span> </div> 
7 <!- -标题 提示 图 片 --> 

8 . <div class="clsContent"> 

9. <!-- 品 牌 列 表 --> 

EO <ul> 

jE <1i ><a href="#"> 佳 能 </a><i>(30440) </i></1i> 
2 <1i ><a href="#"> 索 尼 </a><i>(27220) </i></1i> 
1 <1i ><a href="#"> 三 星 </a><i>(20808) </i></1i> 
14. <1i ><a href="#"> 尼 康 </a><i>(17821) </i></1i> 
i156 <1i ><a href="#"> 松 下 </a><i>(12289) </i></1i> 
16. <1i ><a href="#"> 卡 西欧 </a><i>(8242) </i></1i> 
了 <1i ><a href="#"> 富 士 </a><i> (14894) </i></1i> 
8 <1i ><a href="#"> 柯 达 </a><i> (9520) </i></1i> 
95 <1i ><a href="#"> 宾 得 </a><i> (2195) </i></1i> 
20. <1i ><a href="#"> 理 光 </a><i>(4114) </i></1i> 
A <1i ><a href="#"> 奥 林 </a><i>(12205) </i></1i> 
3 <1i ><a href="#"> 明 基 </a><i>(1466) </i></1i> 
2 <1i ><a href="#"> 爱 国 者 </a><i>(3091) </i></1i> 
二 <1i ><a href="#"> 其 他 </a><i>(7275) </i></1i> 
255 </u1> 

26. <div class="clsBot"><a href="#"> 精 简 显 示 品牌 </a><img src="Images/ 


a5.gif" alt=""/></div> 


311 


2 
4: 司 
2 
308 


PPoowaowmewNm hm 
[i ee a 


FF 
心 w_ 


5 


16. 
17。 
18 . 
95 
20. 


21, 


22% 
23。 


312 


<!-- 显 示 / 隐 藏 内 容 --> 
</div> 
</div> 
</body> 


在 上 述 代码 中 ， 设 置 了 一 个 包含 标题 和 品牌 列表 信息 的 <div> 容 器 标签 对 象 。 
下 面 编写 jQuery 代码 实现 经 典 导航 栏 ， 具 体 代码 如 下 。 


$ (function () { // 页 面 加 载 事 件 
$(".clsHead") .click (function(){ // 图 片 单 击 事件 
if($(".clsContent") .is(":visible")){ // 如 果 内 容 可 见 
// 改 变 图 片 


$(".clsHead span img") .attr("src","Images/al.gif"); 
$(" .clsContent") .css("display","none"); // 隐 藏 内 容 
}elsel{ 
// 改 变 图 片 
$(".clsHead span img") .attr("src","Images/a2.gif"); 
$(" .clsContent") .css ("display", "block");// 显 示 内 容 
} 
En 
$(".clsBot" > a).click(function(){ // 链 接 单 击 事件 
if($(".clsBot" > a) .text ()==" 精 简 显示 品牌 ") { 
// 如 果 内 容 为 "精简 显示 品牌 “字样 
$("ul li:gt(5):not(:last)") .hide(); 
// 隐 藏 index 号 大 于 5 且 不 是 最 后 一 项 的 元 素 
$(".clsBot"” > a) .text ("显示 全 部 品牌 ") ; ”// 将 字符 内 容 更 改 为 \ 显 示 全 部 品牌 ” 
}elset 
// 显 示 所 选 元 素 且 增加 样式 
$("ul li:gt(5):not(:last)").show() .addClass ("GetFocus"); 
$(".clsBot" > a) .text ("精简 显示 品牌 ") ; 
// 将 字符 内 容 更 改 为 \ 精 简 显示 品牌 “字样 
} 
EY 
ME 


在 上 述 代码 中 : 


e 第 1~12 行 实现 伸缩 导航 条 的 功能 ， 其 中 第 5 行 和 第 9 行 代码 实现 图 片 的 变换 ， 
“.clsHead span img” 表 示 获 取 类 型 clsHead 中 <span> 标 签 元 素 下 的 <img> 标 签 元 素 ， 


即 图 片 元 素 ; 其 中 第 6 行 和 第 10 行 代码 获取 类 名 称 为 clsContent 的 元 素 集合 ， 
内 容 的 显示 或 隐藏 。 
日 第 13~23 行 主要 通过 判断 超级 链接 元 素 的 内 容 是 否 为 “精简 显示 品牌 ”字样 ， 


并 实现 


实现 品 


牌 信息 的 显示 和 隐藏 。 其 中 第 14 行 代码 检查 单 击 的 内 容 ，“.clsBot > a” 获 取 超 级 链 


接 元 素 对 象 ，text() 方 法 用 来 实现 获取 元 素 对 象 的 内 容 。 第 15 行 代码 实现 指定 


内 容 的 


隐藏 ， 其 中 gt(5) 和 not(:lasb) 分 别 为 两 个 并 列 的 过 滤 条 件 ， 即 选择 索引 大 于 5 并 且 不 是 
最 后 一 个 元 素 的 集合 。hide() 方 法 用 来 实现 隐藏 元 素 功能 。 
18.4 操作 DOM 对 象 
DOM 全 称 为 Document Object Model， 意 思 是 文档 对 象 模型 。 该 模型 为 文档 提供 了 一 种 


结构 化 表示 方法 ， 通 过 这 些 方法 可 以 改变 文档 的 内 容 和 展示 形式 。 在 实际 运用 中 ，DOM 起 
到 了 桥梁 的 作用 ， 通 过 它 可 以 实现 跨 平 台 、 跨 语言 的 标准 访问 和 操作 。 


18.4.1 jQuery 关于 元 素 的 操作 


在 具体 设计 页 面 时 ， 经 常 需要 与 页 面 中 的 元 素 进行 交互 操作 。 在 具体 操作 时 ， 经 常 需要 
进行 元 素 的 操作 ， 主 要 包含 操作 元 素 内 容 、 操 作 元 素 属性 和 操作 元 素 样式 等 。 

1. 操作 元 素 内 容 

通过 各 种 选择 器 、 过 滤器 可 以 获取 到 所 要 操作 的 元 素 ， 然 后 可 以 对 这 些 元 素 进行 DOM 
的 操作 。 那 么 ， 最 常用 的 操作 就 是 对 元 素 内 容 的 获取 和 修改 ，jQuery 库 提 供 的 方法 如 表 
18-12 所 示 。 


表 18-12 操作 元 素 内 容 的 方法 


乔 

名 元素 中 的 HTML 内 容 
议 轩 元 素 中 的 HTML 内 容 
获取 元 素 中 的 文本 内 容 











text(value) 设置 元 素 中 的 文本 内 容 
val() 获取 表单 中 的 文本 内 容 
val(value) 设置 表单 中 的 文本 内 容 








2. 操作 元 素 属性 

除 对 元 素 内 容 进行 设置 和 获取 之 外 ， 通 过 jQuery 库 也 可 以 对 元 素 本 身 的 属性 进行 操作 ， 
包括 获取 属性 的 属性 值 、 设 置 属性 的 属性 值 ， 并 且 可 以 删除 属性 。jQuery 库 提供 的 方法 如 表 
18-13 所 示 。 
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表 18-13 操作 元 素 属性 的 方法 

















方法 名 描述 

attr(key) 获取 某 个 元 素 key 属性 的 属性 值 
attr(key,value) 设置 某 个 元 素 key 属性 的 属性 值 
attr({keyl:value2,key2:value2...}) 设置 某 个 元 素 多 个 key 属性 的 属性 值 
attr(key,function(index,value) {}) 通过 匿名 方法 设置 某 个 元 素 key 





3. 操作 元 素 样式 

元 素 样式 操作 包括 直接 设置 CSS 样式 、 增 加 CSS 类 别 、 类 别 切换 、 删 除 类 别 这 几 种 操 
=。 而 在 整个 jQuery 库 使 用 频率 上 来 看 ，CSS 样式 的 操作 也 是 极 高 的 。jQuery 库 提 供 的 方法 
如 表 18-14 所 示 。 


让 


表 18-14 操作 元 素 样式 的 方法 
方法 名 描述 

获取 某 个 元 素 行内 的 CSS 样式 
获取 某 个 元 素 行 内 的 多 个 CSS 样式 

设置 某 个 元 素 行内 的 CSS 样式 

设置 某 个 元 素 行内 的 CSS 样式 ， 通 过 匿名 方法 来 设置 








设置 某 个 元 素 行内 的 多 个 CSS 样式 
给 菜 个 元 素 添加 一 个 CSS 类 
给 菜 个 元 素 添加 多 个 CSS 类 
删除 某 个 元 素 的 一 个 CSS 类 


removeClass(classlclass2class3...) 删除 某 个 元 素 的 多 个 CSS 类 
toggleClass(class) 来 回 切换 默认 样式 和 指定 样式 
toggleClass(class lclass2class3...) 来 回 切 换 多 个 默认 样式 和 指定 样式 
toggleClass(class,switch) 来 回 切 换 样式 的 时 候 设置 切换 频率 
toggleClass(function() {}) 通过 匿名 方法 设置 切换 的 规则 
toggleClass(function() {},switch) 在 匿名 方法 设置 时 也 可 以 设置 频率 


toggleClass(function(i,c,s) {},switch) 在 匿名 方法 设置 时 传递 3 个 参数 


4. 其 他 方法 
对 于 元 素 样式 的 操作 ，jQuery 库 不 但 提供 了 核心 操作 方法 ， 如 .css()、.addClass() 等 ， 还 
封装 了 一 些 特殊 功能 的 元 素 样式 操作 方法 。 相 应 方法 如 表 18-15 所 示 。 
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表 18-15 特殊 方法 























方法 名 描述 

width() 获取 某 个 元 素 的 宽度 

width(value) 设置 某 个 元 素 的 宽度 

width(function(index,width) {}) 通过 匿名 方法 设置 某 个 元 素 的 宽度 

heightO 获取 某 个 元 素 的 高 度 

height(value) 设置 某 个 元 素 的 高 度 

height(function(index,width) {}) 通过 匿名 方法 设置 某 个 元 素 的 高 度 

innerWidth() 获取 元 素 宽度 ， 包 含 内 边 距 padding 

innerHeight() 获取 元 素 高 度 ， 包 含 内 边 距 padding 

outerWidth() 获取 元 素 宽度 ， 包 含 边框 border 和 内 边 距 padding 
‘outerHeight() 获取 元 素 高 度 ， 包 含 边框 border 和 内 边 距 padding 
outerWidth(ture) 获取 元 素 宽度 ， 且 包含 外 边 距 

‘outerHeight(true) 获取 元 素 高 度 ， 且 包含 外 边 距 

offset() 获取 某 个 元 素 相 对 的 偏 移 位 置 

position() 获取 某 个 元 素 相 对 于 父 元 素 的 偏 移 位 置 
scrollTop() 获取 垂直 滚动 条 的 值 

scrollTop(value) 设置 垂直 滚动 条 的 值 

scrollLeft() 获取 水 平 滚 动 条 的 值 

scrollLeft(value) 设置 水 平 滚动 条 的 值 


18.4.2 关于 表 的 经 典 效果 


项 目的 页 面 中 经 常会 包含 许多 信息 ， 为 了 便于 展示 ， 经 常会 通过 <table> 标 签 来 实现 。 为 
了 让 页 面 显得 更 人 性 化 ， 在 各 行 间 经 常 采用 “隔行 变色 ”的 效果 展示 每 一 行 的 数据 ， 同 时 还 
经 常 提供 “全 选取 消 ”功能 ， 如 图 18-14 所 示 。 




















选项 篇 号 亲 名 性 别 薪资 
口 | iool 李 小 明 男 3560 元 
[a 1002 刘 明 明 i 3780 元 
加 “| ioos 张 小 星 女 4560 元 
口 全 碗 




















图 18-14 展示 员工 信息 


下 面 通过 应 用 jQuery 库 实现 表 的 经 典 效果 ， 有 具体 内 容 见 【范例 18-2】。 在 具体 实现 时 ， 
要 设计 一 个 通过 <table> 标 签 来 展示 员工 薪资 信息 的 页 面 ， 其 HTML 代码 如 下 。 
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【范例 18-2 展示 员工 薪资 信息 】 
<body> 
<table> 
<tr> <! 一 表 的 标题 --> 
<th> 选 项 </th> 
<th> 编 号 </th> 
<th> 姓 名 </th> 
<th> 性 别 </th> 
<th> 薪 资 </th> 
</tr> 
<tr id="0"> <!-- 展 示 员 工 信 息 --> 
<td><input id="Checkbox1l" type="checkbox" value="0"/></td> 
<td>1001</td> 
<td> 李 小 明 </td> 
<td> 男 </td> 
<td>3560 元 </td> 
</ti> 
</table> 
<table> 
<tr> 
<td style="text-align:left;height:28px"><span> <!-" 全 选 /取消 " 复 选 框 --> 
<input id="chkAll" type="checkbox" /> 
全 选 </span> </td> 
JEY> 
</table> 
</body> 


在 上 述 代码 中 ， 第 2~18 行 的 <table> 元 素 用 来 展示 员工 薪资 信息 ， 第 19~25 行 的 <table> 


元 素 用 来 显示 “全 选取 消 ” 复 选 杠 


Domowamum 上 wmN 


ba FF 
DPpPo 
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下 面 编写 jQuery 代码 ， 实 现 “ 隔 行 变色 ”效果 和 “全 选 /取消 ”功能 ， 具 体 代 码 如 下 : 


$ (function() { 
$ ("table tr:nth-child (odd)") .css ("background-color", "#eee");  // 隔 行 变色 
// 全 选 复 选 框 单 击 事件 
$("#chkAll") .click (function() { 
if (this.checked) { // 如 果 自 己 被 选中 
$ ("table tr td input[type=checkbox]") .attr("checked", true); 
» 
else { // 如 果 自 己 没有 被 选中 
$ ("table tr td input[type=checkbox]") .attr ("checked", false); 


}) 
0 


在 上 述 代码 中 : 

e 第 2 行 实现 隔行 变色 功能 ， 其 中 “table tr:nth-child(odd)” 为 子 元 素 过 滤器 ， 即 选择 表 
中 奇数 行 元 素 的 集合 ， 方 法 css() 用 来 设置 元 素 样 式 。 

e@ 第 4~11 行 实现 复 选 框 的 单 击 事件 ， 其 中 “table tr td input[type=checkbox]” 为 表单 过 
滤器 ， 即 选择 表 中 单元 格 里 复 选 框 标签 元 素 。attr() 方 法 用 来 设置 复 选 框 属性 。 


18.4.3 jQuery 关于 节点 的 操作 


DOM 中 有 一 个 非常 重要 的 功能 ， 即 节点 模型 ， 也 就 是 DOM 中 的 M。 页 面 中 的 标签 元 素 
结构 就 是 通过 这 种 节点 模型 来 互相 对 应 的 ， 在 具体 开发 项 目 时 ， 只 需要 通过 这 些 节 点 关系 ， 
就 可 以 实现 创建 、 插 入 、 替 换 、 克 降 、 删 除 等 一 系列 的 节点 操作 。 

1. 创建 节点 元 素 

页 面 中 的 各 种 标签 元 素 ， 通 过 DOM 模型 中 节点 的 相互 关联 形成 树 状 ， 如 果 要 在 页 面 中 
增加 一 个 节点 元 素 ， 只 需要 找到 该 元 素 的 上 级 节点 ， 然 后 通过 $0 方法 完成 节点 元 素 的 创建 ， 
最 后 通过 append() 方 法 添加 所 创建 的 节点 元 素 到 上 级 节点 中 。 

创建 节点 元 素 的 具体 语法 如 下 : 

$ (html) 

其 中 ， 参 数 html 表示 用 于 创建 DOM 节点 元 素 的 HTML 标签 字符 串 。 该 方法 会 创建 一 个 
DOM 对 象 ， 并 将 该 DOM 对 象 封装 成 一 个 jQuery 对 象 返 回 。 

2. 插入 节点 元 素 

创建 节点 元 素 并 没有 实际 用 处 ， 最 重要 的 是 还 需要 将 新 创建 的 节点 插入 到 文档 中 。 对 于 
上 述 功 能 ，jQuery 提供 了 两 种 方式 来 实现 ， 分 别 为 内 部 插入 节点 方式 和 外 部 插入 节点 方式 。 
jQuery 库 提供 的 相关 方法 如 表 18-16 和 表 18-17 所 示 。 

表 18-16 内 部 插入 节点 方法 
方法 名 描述 
向 指定 元 素 内 部 后 面 插入 节点 content 
使 用 匿名 方法 向 指定 元 素 内 部 后 面 插入 节点 








append(content) 


append(function(index,html) {}) 




















appendTo(content) 将 指定 元 素 移 到 指定 元 素 content 内 部 后 面 
prepend(content) 向 指定 元 素 content 内 部 的 前 面 插入 节点 
prepend(function(index,html) {}) 使 用 匿名 方法 向 指定 元 素 内 部 的 前 面 插入 节点 
prependTo(content) 将 指定 元 素 移 到 指定 元 素 content 内 部 前 面 
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表 18-17 外 部 插入 节点 方法 























方法 名 描述 

after(content) 向 指定 元 素 的 外 部 后 面 插入 节点 content 
after(function(index,html) {}) 使 用 匿名 方法 向 指定 元 素 的 外 部 后 面 插入 节点 
before(content) 向 指定 元 素 的 外 部 前 面 插入 节点 content 
before(function(index,html) f}) 使 用 匿名 方法 向 指定 元 素 的 外 部 前 面 插入 节点 
insertAfter(content) 将 指定 节点 移 到 指定 元 素 content 外 部 的 后 面 
insertBefore(content) 将 指定 节点 移 到 指定 元 素 content 外 部 的 前 面 





3. 包 庄 节点 元 素 
在 jQuery 库 中 ， 不 仅 可 以 通过 上 述 方法 创建 和 插入 节点 元 素 ， 还 可 以 根据 具体 要 求 包 庄 
某 个 指定 的 节点 ， 与 包 庄 节点 相关 的 方法 如 表 18-18 所 示 。 
表 18-18 与 包 于 节点 相关 的 方法 
方法 名 描述 
向 指定 元 素 包 囊 一 层 HTML 代码 
向 指定 元 素 包 囊 一 层 DOM 对 象 节点 
使 用 匿名 方法 向 指定 元 素 包 囊 一 层 自 定义 内 容 
移 除 一 层 指定 元 素 包 囊 的 内 容 
用 HTML 将 所 有 元 素 包裹 到 一 起 
用 DOM 对 象 将 所 有 元 素 包 囊 在 一 起 
向 指定 元 素 的 子 内 容 包 囊 一 层 HTML 
wrapInner(element) 向 指定 元 素 的 子 内 容 包 里 一 层 DOM 对 象 节点 
wrapInner(function(index) {}) 用 匿名 方法 向 指定 元 素 的 子 内 容 包 囊 一 层 自 定义 内 容 


4. 节点 其 他 操作 
在 jQuery 库 中 ， 还 存在 一 些 关 于 节点 的 其 他 操作 方法 ， 如 表 18-19 所 示 。 
表 18-19 节点 其 他 操作 
































方法 名 描述 

clone() 表示 复制 元 素 和 内 容 ， 但 不 复制 事件 行为 
remove() 表示 删除 对 象 选择 器 指定 的 元 素 

detach() 表示 删除 对 象 选择 器 指定 的 元 素 

emptyg 表示 清空 对 象 选择 器 指定 的 元 素 
replaceWith(content) 表示 替换 功能 
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18.4.4 超级 链接 提示 效果 


在 项 目的 所 有 页 面 中 ， 经 常会 看 到 超级 链接 的 影子 。 如 果 要 让 超级 链接 自 带 提 示 ， 只 需 
要 在 超级 链接 标签 里 设置 title 属性 即 可 ， 有 具体 语法 如 下 : 


<a href="#" title=" 超 级 链接 提示 信息 "> 提示 </a> 


上 述 代 码 虽 然 可 以 实现 提示 效果 ， 但 是 提示 效果 的 响应 速度 非常 缓慢 。 为 了 实现 良好 的 
人 机 交互 ， 需 要 手动 实现 提示 效果 。 

具体 要 求 为 当 鼠 标 移动 到 超级 链接 上 时 ， 快 速 地 出 现 提示 。 下 面 通过 应 用 jQuery 库 实现 
上 述 要 求 ， 具 体内 容 见 【范例 18-3】。 

在 具体 实现 时 ， 要 设计 一 个 包含 两 个 超级 链接 对 象 的 页 面 ， 其 HTML 代码 如 下 : 

<body> 

<!-- 超 级 链接 --> 

<p><a href="#" class="tooltip" title=" 超 链接 提示 1"> 提 示 1.</a></p> 


<p><a href="#" class="tooltip" title=" 超 链接 提示 2"> 提 示 2.</a></p> 
</body> 


设置 关于 超级 链接 的 类 样式 tooltip， 修 改 超级 链接 的 相关 样式 ， 具 体 代码 如 下 : 


#tooltip{ 
position:absolute; 
border:1lpx solid #333; 
background:#f7f5d1; 
padding:1px; 
Color:#333; 
display:none; 

} 


下 面 编写 jQuery 代码 ， 实 现 超级 链接 提示 功能 ， 具 体 代码 如 下 。 
【范例 18-3 实现 超级 链接 提示 功能 】 


LB $ (function(){ 

全 = var x = 10; 

3 var y = 20; 

4. $ ("a.tooltip") .mouseover (function(e){ 

SE this.myTitle = this.title; 

6. this.title = ""; 

2 Var tooltip = "<div id='tooltip'>"+ this.myTitle 

+"<\/div>"; // 创 建 div 元 素 

8. $ ("body") .append (tooltip); // 把 它 追加 到 文档 中 
$ ("#tooltip") 

10。 .css({ 
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11。 "top": (e.pageY+y) + "px", 


| "left": (e.pageX+x) + "px" 
3: }) .show("fast"); // 设 置 x 坐标 和 y 坐标 ， 并 且 显示 
14. }) .mouseout (function (){ 
TS。 this.title = this.myTitle; 
6 $ ("#tooltip") .remove () 7 // 移 除 
i }) .mousemove (function (e){ 
18 $("#tooltip") 
人 .css({ 
和 20 "top": (e.pageY+y) + "px", 
2 "left": (e.pageX+x) + "px" 
22: a 
2 ]) 7 
24. }) 
在 上 述 代码 中 : 


@ 第 4~13 行 设置 所 标 滑 入 超级 链接 时 的 处 理 方法 ， 其 中 第 7 行 创建 一 个 包含 title 属性 
值 的 提示 框 (<div> 标 签 元素 对 象 ) ， 第 8 行将 所 创建 的 提示 框 对 象 追加 到 文档 中 ， 
剩 下 的 代码 主要 用 来 设置 x 和 yy 坐标， 使 得 提示 框 显示 在 鼠标 位 置 的 旁边 。 

e@ 第 14~16 行 设置 鼠标 滑 出 超级 链接 时 的 处 理 方法 ， 即 移 除 提示 框 。 

@ 第 17~23 行 设置 鼠标 在 超级 链接 上 移动 时 的 处 理 方法 ， 即 通过 css() 方 法 设置 提示 效果 
的 坐标 ， 以 达到 提示 效果 跟随 鼠标 一 起 移动 的 效果 。 


在 浏览 器 中 运行 页 面 ， 效 果 如 图 18-15 所 示 ， 当 鼠标 滑 入 超级 链接 时 ， 就 会 快速 出 现 提 
效果 如 图 18-16 所 示 ; 当 鼠 标 滑 出 超级 链接 时 ， 提 示 效 果 就 会 消失 。 


让 | 


) 文字 提示 - Wozilla Firefox | ) 文字 提示 - ozilla Firefox 
文件 @) 蝙 辑 下 ) 查看 G) 历史 GG) 书签 @@) 工具 CD) 帮助 文件 @) ”编辑 让) 查看 QW) 历史 G) 书签 @) 工具 C) 帮助 是 
] 文字 提示 [Ea 文字 提示 国 
- @ lO cl 图 -5 |j- 会 全 F 国 file/// 加 Cl 图 -月 全 | 全 
贺 访问 最 多 留言 ] 新 手 上 路 人 jquery01. htnl 园 访问 最 多 全 留言) 新 手 上 路 人 jquery01, html 


























提示 1 
提示 2. | 起 链接 提示 1 

















file;/11D;/ 新 写 的 12.31/ 代 码 /18/ 范 例 18-3/18. 3. html# 


图 18-15 浏览 页 面 图 18-16 鼠标 滑 入 时 的 效果 


18.4.5 图 片 预览 效果 
为 了 让 项 目 中 的 页 面 更 漂亮 ， 经 常会 看 到 图 片 的 影子 。 对 于 页 面 中 的 图 片 来 说 ， 经 常 需 
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要 实现 图 片 的 预览 效果 。 

有 具体 要 求 为 如 果 将 鼠标 移动 到 图 片上 ， 将 在 该 图 片 的 右 下 角 出 现 一 张 与 之 相对 应 的 大 图 片 ， 
以 达到 图 片 预览 的 效果 。 下 面 通过 应 用 jQuery 库 实 现 上 述 要 求 ， 具 体内 容 见 【 范 例 184】。 

在 具体 实现 时 ， 要 设计 一 个 包含 4 张 图 片 对 象 的 页 面 ， 其 HTML 代码 如 下 : 


<body> 

<ul> 
<!-- 插 入 4 张 图 片 --> 
<1i><a href="images/apple 1 bigger.jpg" class="tooltip" title=" 苹 果 
iPod"><img src="images/apple 1.jpg"” alt=" 苹 果 iPod" /></a></1i> 
<1i><a href="images/apple 2 bigger.jpg" class="tooltip" title=" 苹 果 iPod 
nano"><img src="images/apple 2.jpg" alt=" 苹 果 iPod nano"/></a></1i> 
<li><a href="images/apple 3 bigger.jpg" class="tooltip" tit1le=" 苹 果 
iPhone"><img src="images/apple 3.jpg" alt=" 苹 果 iPhone"/></a></1i> 
<1i><a href="images/apple 4 bigger.jpg" class="tooltip" title=" 苹 果 
Mac"><img src="images/apple 4.jpg" alt=" 苹 果 Mac"/></a></1i> 

</ul> 

</body> 


在 上 述 代码 中 ， 用 超级 链接 标签 包含 4 张 图 片 。 设 置 列表 和 图 片 的 相关 样式 ， 以 达到 预 
期 的 排列 顺序 ， 具 体 代码 如 下 : 


ul,1it{ 
margin:0; 
padding:0; 

} 

a 
list-style:none; 
float:left; 
display:inline; 
margin-right:10px; 
border:1lpx solid #AAAAAA; 

} 

img{border:none; 

} 


下 面 编写 jQuery 代码 ， 实 现 图 片 预 览 功能 ， 具 体 代 码 如 下 。 
【范例 18-4 实现 图 片 预 览 功能 】 


$ (function(){ 
Var XxX = 10; 
var y = 20; 
$ ("a.tooltip") .mouseover (function(e){ 
this.myTitle = this.title; 
this.title = ""; 


MarnGDOp 
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了 Var imgTitle = this.myTitle? "<br/>" + this.myTitle : ""; 
8 // 创 建 div 元 素 


9. Var tooltip = "<div id='tooltip'><img src='"+ this.href 
+"， alt=' 产 品 预览 图 '/>"+imgTitlet+"<\/div>"; 

10. $ ("body") .append (tooltip); // 把 它 追加 到 文档 中 

Te $("#tooltip") 

2 .css({ 

13.。 "top": (e.pageY+y) + "px", 

14. "left": (e.pageX+x) + "px" 

3 }) .show ("fast"); // 设 置 x 坐标 和 y 坐标 ， 并 且 显示 
6 }) .mouseout (function(){ 

Fie this.title = this.myTitle; 

18. $ ("#tooltip") .remove (); // 移 除 
9 }) .mousemove (function (e){ 

20. $ ("#tooltip") 

I .css({ 

2 "top": (e.pageYt+y) + "px", 

5 轴 "left": (e.pageX+x) + "px" 

24. ey 

5 }) 7 

26. }) 


在 上 述 代 码 中 : 

@ 第 4~15 行 设置 鼠标 滑 入 图 片 时 的 处 理 方法 ， 其 中 第 9 行 创建 一 个 包含 大 图 片 的 提示 
框 (<div> 标 签 元素 对 象 ) ， 第 10 行将 所 创建 的 提示 框 对 象 追 加 到 文档 中 ， 剩 下 的 代 
码 主 要 用 来 设置 x 和 y 坐标 ,使 得 提示 框 显示 在 鼠标 位 置 的 旁边 。 

ee 第 16~18 行 设置 所 标 滑 出 图 片 时 的 处 理 方法 ， 即 移 除 提示 框 。 

@ 第 19~25 行 设置 饼 标 在 图 片上 移动 时 的 处 理 方法 ， 即 通过 css() 方 法 设置 提示 效果 的 坐 
标 ， 以 达到 提示 效果 跟随 鼠标 一 起 移动 的 效果 。 


在 浏览 器 中 运行 页 面 ， 效 果 如 图 18-17 所 示 ; 当 鼠 标 滑 过 小 图 片 时 就 会 快速 出 现 图 片 的 
预览 提示 效果 ， 如 图 18-18 所 示 ; 当 鼠 标 离开 小 图 片 时 ， 图 片 预 览 提示 效果 就 会 消失 。 
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图 18-17 浏览 页 面 
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EA 
图 18-18 鼠标 滑 入 图 片 时 的 效果 


18.5 响应 事件 


JavaScript 中 有 一 个 非常 重要 的 功能 ， 就 是 事件 驱动 。 当 页 面 完全 加 载 后 ， 用 户 通 过 鼠标 
或 键盘 选择 页 面 中 的 标签 ， 就 可 以 触发 所 绑 定 的 事件 。jQuery 库 为 开发 者 提供 了 更 有 效 的 事 
件 编写 行为 ， 封 装 了 大 量 有 益 的 事件 方法 供 开 发 人 员 使 用 。 


18.5.1 绑 定 和 删除 事件 


所 谓 事 件 ， 就 是 被 对 象 识别 的 操作 ， 即 操作 对 象 对 环境 变化 的 感知 和 反应 ， 例 如 单 击 按 

钮 或 者 敲 击 键盘 上 的 按键 。 所 谓 事件 流 ， 是 指 由 于 HTML 文档 使 用 的 是 DOM 模型 ， 而 该 模 

型 是 从 上 到 下 一 级 一 级 的 结构 ， 就 会 触发 一 连 串 的 对 象 ， 例 如 ， 在 单 击 HTML 页 面 上 的 某 个 

按钮 时 ， 不 仅 会 触发 该 按钮 的 单 击 事件 ， 还 将 触发 安装 所 属 容器 〈div) 的 单 击 事件 ， 同 时 还 
将 触发 父 级 别 容器 的 单 击 事件 。 

-个 操作 会 造成 一 连 串 的 事件 触发 ， 就 会 形成 一 个 事件 流 。 所 谓 冒 泡 型 事件 流 ， 就 是 事 

件 激活 顺序 从 出 发 点 元 素 开始 向 上 层 逐 级 冒 泡 ， 直 到 document 为 止 。 在 前 面 单 击 按钮 的 例子 

中 ， 首 先 会 触发 按钮 的 单 击 事件 ， 接 着 再 触发 容器 div 的 单 击 事件 ， 青 触发 body 的 单 击 事 
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件 ， 再 触发 html 的 单 击 事件 ， 最 后 触发 document 的 单 击 事件 。jQuery 库 对 事件 的 支持 ， 也 
采用 冒 泡 型 事件 流 。 
JavaScript 拥有 很 多 事件 ， 常 用 的 事件 有 click 、dblclick 、mousedown 、mouseup 、 


mousemove、mouseover、mouseout、change、select、submit、keydown、keypress、keyup、 
blur、focus、load、resize、scroll 和 error 等 。 


在 jQuery 库 中 ， 通 过 on() 方 法 来 为 元 素 绑 定 上 述 事件 ， 具 体 语法 如 下 : 


on (events [,selector] [,datalvfn) 


其 中 ， 参 数 type 表示 一 个 或 多 个 事件 名 字符 串 ，[selector] 是 可 选 的 选择 器 字符 串 ，[data] 
是 可 选 的 ， 可 以 为 event.data 属性 值 传递 一 个 额外 的 数据 ， 该 数据 的 类 型 可 以 是 一 个 字符 
串 、 数 字 、 数 组 或 对 象 ， 旬 表示 事件 的 处 理 方法 。 


下 面 的 实例 实现 单 击 按钮 弹出 一 个 对 话 框 ， 其 HTML 代码 如 下 : 
<body> 
<input type="button" value=" 弹 出 对 话 框 "/> 
</body> 
通过 jQuery 库 处 理 单 击 事件 ， 需 要 在 JavaScript 文件 中 编写 如 下 代码 : 
// 绑 定单 击 事件 
$('input') .on('click', function() { // 单 击 按钮 后 执行 匿名 方法 


alert (' 点 击 ! ') 7 
}) 7 


在 上 述 代码 中 ， 内 容 “S$Cinput)” 首 先 获取 input 类 型 对 象 ， 然 后 通过 on() 方 法 为 该 对 象 
的 单 击 事件 绑 定 处 理 方法 ， 在 处 理 方法 里 实现 弹出 一 个 对 话 框 。 


查看 HTML 页 面 ， 单 击 “ 弹 出 对 话 框 ”按钮 则 会 弹出 对 话 框 ， 运 行 效果 如 图 18-19 所 示 。 
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18-19 运行 结果 


通过 jQuery 库 绑 定 事件 时 ， 所 绑 定 事件 的 处 理 方法 除 可 以 使 用 上 述 例 子 中 的 匿名 方法 之 
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外 ， 还 可 以 绑 定 普通 方法 ， 例 如 : 


// 普 通 处 理 方法 
Sopacnsonofweclack En // 执 行 普通 方法 时 无 须 圆 括号 
function fn() { 
alert (' 单 击 ! '); 
} 


除 上 述 情况 之 外 ，jQuery 库 中 的 on() 方 法 还 可 以 同时 绑 定 多 个 事件 ， 例 如 下 面 的 代码 ; 


// 可 以 同时 绑 定 多 个 事件 
$('input') .on('mouseout mouseover',function() { // 同 时 绑 定 移出 和 滑 入 事件 
$('div') .html (function (index,value) { 
returnvalue+'1'; 
]) 7 
]) 7 


在 jQuery 库 中 ， 既 然 可 以 通过 on() 方 法 绑 定 事件 ， 那 么 就 应 该 存在 一 个 方法 实现 删除 事 
件 的 功能 ， 该 方法 的 具体 语法 如 下 : 

off (events [,selector], [fn]) 

其 中 ， 两 个 参数 都 是 可 选 的 ， 如 果 该 方法 没有 任何 表示 删除 绑 定 的 所 有 事件 ， 参 数 
events 表示 删除 指定 类 型 的 事件 ， 徊 表示 删除 指定 类 型 事件 的 指定 处 理 方法 。 

下 面 的 实例 实现 删除 单 击 事件 ， 需 要 在 JavaScript 文件 里 编写 如 下 代码 : 

$("input') .off('click'); // 删 除 当前 元 素 的 click 事件 

在 上 述 代 码 中 ， 通 过 使 用 off0) 方 法 中 的 events 参数 删除 指定 类 型 事件 ， 除 上 述 方式 之 
外 ， 还 可 以 通过 如 下 两 个 方式 来 实现 : 


// 使 用 off () 删除 绑 定 的 事件 
$('input') .off(); // 删 除 所 有 当前 元 素 的 事件 
或 者 

// 使 用 off 参数 删除 指定 处 理 方法 的 事件 
$('input') .off('click', fn1); // 只 删除 fn1 处 理 方法 的 事件 


18.5.2 jQuery 所 支持 的 事件 和 事件 类 型 


JavaScript 虽然 提供 了 非常 强大 的 事件 机 制 ， 但 是 由 于 浏览 器 处 理事 件 机 制 的 差异 ， 在 编 
写 JavaScript 程序 时 不 得 不 编写 很 多 代码 以 满足 各 种 浏览 器 之 间 的 兼容 性 需求 。 万 幸 的 是 ， 
jQuery 库 对 JavaScript 中 的 事件 进行 封装 ， 不 必 再 考虑 各 种 浏览 器 之 间 的 差异 。 

为 了 使 开发 者 更 加 方便 地 绑 定 事件 ，jQuery 库 封 装 了 JavaScrpit 常用 的 事件 以 便 省 略 更 
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多 的 代码 ， 这 些 事件 被 称 为 简单 事件 ， 关 于 简单 事件 的 绑 定 方法 如 表 18-20 所 示 。 
表 18-20 简单 事件 的 绑 定 方法 
方法 名 触发 条 件 描述 
click(fh) 鼠标 触发 每 一 个 匹配 元 素 的 click ( 单 击 ) 事件 
dblclick(fn) 鼠标 触发 每 一 个 匹配 元 素 的 dblclick (双击 ) 事件 
mousedown(fn) 鼠标 触发 每 一 个 匹配 元 素 的 mousedown ( 单 击 后 ) 事件 
mouseup( 人 fh) 鼠标 触发 每 一 个 匹配 元 素 的 mouseup( 单 击 弹 起 ) 事件 
mouseover(fp) 鼠标 触发 每 一 个 匹配 元 素 的 mouseover (鼠标 移入 ) 事件 
mouseout(fn 鼠标 触发 每 一 个 匹配 元 素 的 mouseout (鼠标 移出 ) 事件 
mousemove(fn) 鼠标 触发 每 一 个 匹配 元 素 的 mousemove 〈 鼠 标 移动 ) 事件 
mouseenter(fn 鼠标 触发 每 一 个 匹配 元 素 的 mouseenter (鼠标 穿 过 ) 事件 
mouseleave(fn) 鼠标 触发 每 一 个 匹配 元 素 的 mouseleave (鼠标 穿 出 ) 事件 
keydown(fn) 键盘 触发 每 一 个 匹配 元 素 的 keydown〔 键 盘 按 下 ) 事件 
keyup(fn 键盘 触发 每 一 个 匹配 元 素 的 keyup〈 键 盘 按 下 弹 起 ) 事件 
keypress(fn) 键盘 触发 每 一 个 匹配 元 素 的 keypress〈 键 盘 按 下 ) 事件 
unload(fn 文档 当 钊 载 本 页 面 时 绑 定 一 个 要 执行 的 方法 
resize(fp) 文档 触发 每 一 个 匹配 元 素 的 resize〈 文 档 改 变 大 小 ) 事件 
scroll(fn, 文档 触发 每 一 个 匹配 元 素 的 scroll (滚动 条 拖 动 ) 事件 
focus(fn 表单 触发 每 一 个 匹配 元 素 的 focus (获取 焦点 ) 事件 
blur(fn 表单 触发 每 一 个 匹配 元 素 的 blur (失去 焦点 ) 事件 
focusin(fn) 表单 触发 每 一 个 匹配 元 素 的 focusin 焦点 激活 ) 事件 
focusout(fh 表单 触发 每 一 个 匹配 元 素 的 focusout (焦点 丢失 ) 事件 
select(fn 表单 触发 每 一 个 匹配 元 素 的 select (文本 选 定 ) 事件 
change(fn 表单 触发 每 一 个 匹配 元 素 的 change 〈 值 改变 ) 事件 
submit(fn 表单 触发 每 一 个 匹配 元 素 的 submit (表单 提交 ) 事件 
除 上 述 简单 事件 之 外 ，jQuery 库 还 组 合 一 些 简单 事件 合成 复合 事件 ， 比 如 切换 功能 、 智 








能 加 载 等 。jQuery 库 所 支持 的 复合 事件 如 表 18-21 所 示 。 


表 18-21 复合 事件 















描述 
当 鼠 标 移入 触发 1， 移出 触发 m2 
已 废弃 ， 当 鼠标 单 击 触发 nl， 再 单 击 触发 人 2 





hover([fn1,]fn2) 
toggle(fn1,fn2[,fn3.. 


在 具体 使 用 事件 时 ， 如 果 想 要 在 事件 处 理 程序 里 获取 关于 事件 的 信息 ， 就 需要 使 用 事件 
对 象 。 在 JavaScript 里 ， 因 为 不 同 浏览 器 对 事件 对 象 的 获取 以 及 事件 对 象 的 属性 有 差异 ， 所 
以 开发 人 员 很 难 使 用 事件 对 象 实现 跨 浏览 器 的 操作 。 不 过 jQuery 库 在 遵循 W3C 标准 的 同 
时 ， 又 对 事件 对 象 进行 了 一 次 封装 ， 使 得 事件 对 象 的 使 用 具有 更 好 的 兼容 性 。 
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关于 事件 对 象 的 属性 如 表 18-22 所 示 。 





表 18-22 事件 对 象 的 属性 
































属性 名 称 描述 

type 事件 类 型 ， 如 果 使 用 一 个 事件 处 理 方法 来 处 理 多 个 事件 ， 可 以 使 用 此 属性 获得 事件 类 型 

target 获取 事件 触发 者 DOM 对 象 

data 事件 调用 时 传 入 额外 参数 

relatedTarget | 对 于 鼠标 事件 ， 标 识 触发 事件 时 离开 或 者 进入 的 DOM 元 素 

currentTarget | 冒 泡 前 的 当前 触发 事件 的 DOM 对 象 ， 等 同 于 this 

pageX/Y 鼠标 事件 中 ， 事 件 相 对 于 页 面 原 点 的 水 平 /垂直 坐标 

result 上 一 个 事件 处 理 方法 返回 的 值 

timeStamp 事件 发 生 时 的 时 间 戳 

altKey Alt 键 是 否 被 按 下 ， 如 果 按 下 则 返回 true 

ctriKey Ctrl 键 是 否 被 按 下 ， 如 果 按 下 则 返回 true 

ti a 键 是 否 被 按 下 ， 按 下 返回 true。Meta 键 就 是 PC 机 器 的 Ctrl 键 ,或 者 Mac 机 器 的 
Command 键 

shiftKey Shift 键 是 否 被 按 下 ， 按 下 返回 tme 

keyCGode 对 于 keyup 和 edo 事件 返回 被 按 下 的 键 ， 不 区 分 大 小 写 ， 例如 a 和 从 都 返回 65。 对 
于 keypress 事 件 请 使 用 which 属性 ， 因 为 which 属性 跨 浏 览 器 时 依然 可 靠 

i 对 于 键盘 事件 ， 返 回 触发 事件 的 键 的 数字 编码 。 对 于 鼠标 事件 ， 返 回 鼠标 按键 号 〈1 左 
键 ，2 中 键 ，3 右键 ) 

ScreenX/Y 对 于 鼠标 事件 ， 获 取 事 件 相对 于 屏幕 原点 的 水 平 /垂直 坐标 











关于 事件 对 象 的 方法 如 表 18-23 所 示 。 


表 18-23 事件 对 象 的 方法 

















方法 名 称 说 明 
取消 可 能 引起 任何 语意 操作 的 事件 ， 比 如 <a> 标 签 元 素 的 href 链接 加 
i 载 、 表 单 提交 以 及 click 引起 复 选 框 的 状态 切换 
isDefaultPrevented() 是 否 调用 过 preventDefault0 方 法 
stopPropagation() 取消 事件 冒 泡 
isPropagationStopped() 是 否 调用 过 stopPropagation() 方 法 


stopImmediatePropagation() 


isImmediatePropagationStopped() | 是 否 调用 过 stopImmediatePropagation() 方 法 


取消 执行 其 他 的 事件 处 理 方法 并 取消 事件 冒 泡 。 如 果 同 一 个 事件 绑 定 
了 多 个 事件 处 理 方法 ， 在 其 中 一 个 事件 处 理 方法 中 调用 此 方法 后 将 不 
会 继续 调用 其 他 的 事件 处 理 方法 
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18.5.3 表单 动态 效果 


在 项 目的 所 有 页 面 中 ， 经 常会 看 到 表单 的 影子 。 为 了 让 表单 实现 动态 效果 ，jQuery 库 封 
装 了 许多 关于 表单 的 事件 ， 本 节 将 介绍 关于 表单 事件 的 一 些 经 典 应 用 。 

1. 表单 标签 元 素 焦点 的 获取 和 失去 

在 表单 中 一 般 都 会 有 文本 框 、 密 码 框 和 文本 域 等 标签 元 素 ， 在 实际 开发 中 通常 使 用 焦点 
事件 改变 标签 的 样式 ， 让 控件 突出 显示 。 该 效果 可 以 极 大 地 提升 用 户 体验 ， 使 用 户 的 操作 得 
到 及 时 的 反馈 。 下 面 通过 应 用 jQuery 库 实现 上 述 要 求 ， 具 体内 容 见 【范例 18-5】。 

在 具体 实现 时 ， 要 设计 一 个 包含 文本 框 和 密码 框 的 页 面 ， 其 HTML 代码 如 下 : 


1.<form > 

2 <fieldset> 

3 <legend> 登 录 页 面 </legend> 

a <div> <! 一 用 户 文本 框 --> 
<label for="username"> 用 户 :</1label> 
Ss <input id="username" type="text" /> 
Ps </div> 

:让 <div> <!-- 密 码 文本 框 --> 
9. <label for="pass"> 密 码 :</label> 

0 <input id="pass" type="password" /> 
Te </div> 


2 </fieldset> 
13.</form> 


设置 一 个 类 样式 ， 作 为 标签 突出 显示 的 样式 ， 具 体 代 码 如 下 : 
.focus { 
border: lpx solid #f00; 


background: #fcc; 
1 


下 面 编写 jQuery 代码 ， 实 现在 标签 触发 焦点 事件 时 使 用 上 述 样式 ， 具 体 代 码 如 下 : 
【范例 18-5 实现 超级 链接 提示 功能 】 


1.$ (function(){ 
2 $(":input") .focus (function (){ // 获 取 焦 点 
3 $ (this) .addClass ("focus"); 
4. 3 
5 .blur (function (){ // 失 去 焦点 
6。 $ (this) .removeClass ("focus"); 
Ee 1); 
8.}) 
在 上 述 代 码 中 ， 为 <inpu 人 标签 绑 定 了 获取 焦点 事件 focus 和 失去 焦点 事件 blur， 当 获取 
焦点 后 ， 则 添加 focus 类 样式 ， 如 果 失 去 焦点 ， 则 移 除 focus 类 样式 。 
在 浏览 器 中 运行 页 面 ， 效 果 如 图 18-20 所 示 ; 单 击 用 户 文本 框 ， 获 取 焦点 ， 效 果 如 图 18-21 
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所 示 ; 单 击 页 面 空白 处 ， 使 文本 框 失去 焦点 。 
) 售 点 获取 和 失去 一 Worilla Firefox ) 年 点 获取 和 和 去 - Hozilla Firefox 


了 集 点 于 取 和 夫 去 
- aN/OT7C|- P| Olr OO pT) 
国 廊 站 有 多 二 ] 留言 二 新 手 上 jqueryot ht 


个 人 得 本 信息 
名 次 :[ 





18-20 加 载 页 面 图 18-21 标签 突出 显示 


2. 文本 域 高 度 的 动态 变 

在 许多 网 站 中 ， 特 别 是 论坛 、 评 论 类 网 站 ， 都 存在 一 个 在 线 文本 编辑 器 ， 在 该 组 件 中 一 
般 都 存在 两 个 功能 (“+” 和 “-”) 按钮 ， 用 来 控制 内 容 输入 区 域 的 高 度 。 内 容 输入 区 域 的 
动态 变化 是 一 个 非常 经 典 的 效果 。 下 面 通过 应 用 jQuery 库 实现 上 述 要 求 ， 具 体内 容 见 【范例 
18-6】。 

在 具体 实现 时 ， 在 页 面 表单 中 通过 文本 域 来 代替 在 线 文 本 编辑 器 ， 然 后 添加 两 个 按钮 实 
现 文本 域 高 度 的 动态 变化 ， 其 HTML 代码 如 下 : 


) <form action="" method="post"> 

这 <div class="msg"> 

3 <div class="msg_caption"> 

入 <span class="bigger" > 向 下 (+)</span> 

5 <!-- 增 加 高 度 --> 

6. <span class="smaller" > 向 上 (-)</span> </div> 
区 <!- -减少 高 度 --> 

8. <div> <!-- 文 本 域 --> 
9.。 <textarea id="comment" rows="8" cols="25"> 
10. 在 线 文 本 编辑 器 .在 线 文本 编辑 器 .在 线 文 本 编辑 器 . 
i 在 线 文本 编辑 器 .在 线 文本 编辑 器 .在 线 文本 编辑 器 . 
2 在 线 文本 编辑 器 .在线 文本 编辑 器 .在 线 文 本 编辑 器 . 
ei 在 线 文本 编辑 器 .在 线 文本 编辑 器 . 在线 文 本 编辑 器 . 
14. </textarea> 

15, </div> 

16, </div> 

9 </form> 


下 面 编写 jQuery 代码 ， 当 单 击 “向 下 (+)” 按 钮 后 ， 如 果 文 本 域 的 高 度 小 于 500px， 则 在 
原来 高 度 的 基础 上 增加 50px; 当 单 击 “ 向 上 (-)” 按 钮 后 ， 如 果 文 本 域 的 高 度 大 于 50px， 则 在 
原来 的 基础 上 减 去 50px， 具 体 代 码 如 下 。 


【范例 18-6 实现 超级 链接 提示 功能 】 
1.$ (function(){ 
2 var $comment = $('#comment'); // 获 取 文本 域 
2 $('.bigger') .click(function(){ // 向 下 按钮 绑 定 单 击 事件 
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4. if(!$comment.is(":animated")){ // 判 断 是 否 处 于 动画 状态 


5- if( Scomment.height() < 500 ){ 
Se $comment .animate ({height:"+=50"},400); 
// 重 新 设置 高 度 ， 在 原 有 的 基础 上 加 50px 
了 | 司 
入 
9. 寺 
OE $('.smaller') .click(function(){  ”// 向 上 按钮 绑 定 单 击 事件 
i if(!$comment.is(":animated")){ // 判 断 是 否 处 于 动画 状态 
1 if( $comment.height() > 50 ){ 
1 次 $comment .animate ({height:"-=50"},400); 
// 重 新 设置 高 度 ， 在 原 有 的 基础 上 减 50px 
14. } 
了 5 } 
16. ]}) 7 
Te 
在 上 述 代 码 中 : 


@ 第 2 行 代 码 获 取 文本 域 对 象 Scomment。 

e 第 3~9 行 获取 向 下 按钮 ， 然 后 绑 定 单 击 事件 ， 在 处 理 单 击 事件 时 ， 首 先 在 第 4 行 判断 
是 否 处 于 动画 状态 ， 然 后 在 第 S 行 判断 文本 域 对 象 的 高 度 是 否 小 于 500， 如 果 小 于 则 
需要 重新 设置 高 度 ， 即 在 原来 高 度 的 基础 上 增加 50。 

e 第 10~16 行 获取 向 上 按钮 ， 然 后 绑 定 单 击 事件 ， 在 处 理 单 击 事件 时 ， 首 先 在 第 11 行 
判断 是 否 处 于 动画 状态 ， 然 后 在 第 12 行 判断 文本 域 对 象 的 高 度 是 否 大 于 50， 如 果 大 
于 则 需要 重新 设置 高 度 ， 即 在 原来 高 度 的 基础 上 减少 50。 


在 浏览 器 中 运行 页 面 ， 效 果 如 图 18-22 所 示 ， 单 击 “向 下 (+)” 按 钮 后 ， 效 果 如 图 18-23 
所 示 ; 单 击 “向 上 (-)” 按 钮 后 ， 效 果 如 图 18-24 所 示 。 


) 文本 城 高 度 的 动态 变化 - Wozilla Firefox ) 文本 工 再 度 的 动 太 亚 化 “Bioz: 
文件 名 ) 。 编 查 四。 查看 () 历史 总 ) 书签 @) 工具 TD) 帮助 如 


] 文 本 域 高 度 的 动态 变化 国 
J EA EI I Rs 让] BE NF eer Mot 
国 访问 景 多 广 ] 留言 新手 上 路 了) jgquery0l.html 


入 办 下 全 立 证 枯 生 绊 在 引文 本 师 和 昌 


在 线 立 可 
er 
在 谍 文 本 蝙 辑 器 在 战 文本 编 检 器 在 厂 文 本 编号 器 
在 线 文 本 编 得 器 加 器 在 线 文本 编号 器 
在 线 文本 综 覃 器 在 贱 文本 编辑 器 在 贱 文 丰 蝙 号 器 
在 线 文本 编 担 器 在 战 文本 编辑 器 在 贱 文 本 编号 器 


























图 18-22 加 载 页 面 18-23 增加 高 度 效 果 
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) 文本 城 高 度 的 动 坊 变 化 - Hzilla Firefoz 











18-24 降低 高 度 效果 


3. 表单 验证 


在 项 目 开 发 中 ， 不 仅 需 要 进行 前 台 验 证 ， 还 需要 进行 后 台 验 证 。 所 谓 前 台 验 证 ， 有 时 也 


叫 表单 验证 或 者 页 面 验证 。 表 单 验证 的 作用 非常 重要 ， 它 能 使 表单 更 加 灵活 、 美 观 和 丰富 。 
下 面 通过 应 用 jQuery 库 实现 上 述 要 求 ， 具 体内 容 见 【范例 18-7】。 


在 具体 实现 时 ， 设 计 一 个 包含 邮箱 地 址 验证 文本 框 的 页 面 ， 其 HTML 代码 如 下 : 


I <form id="forml" action="#"> 
2 <div id="email" class="divInit"> 邮 箱 : 
3 <span id="spnTip" class="spnInit"></span> 
4. <input id="txtEmail"type="text"class="txtInit"/><!-- 邮 箱 输入 框 --> 
5 </div> 
6 </form> 
在 上 述 代码 中 ， 包 含 3 个 元 素 ， 分 别 为 文本 框 类 型 的 邮箱 输入 框 、 提 示 信 息 的 span 元 素 
和 外 层 的 Div 元 素 。 


下 面 为 页 面 中 的 3 个 元 素 设置 各 种 状态 下 的 样式 ， 有 具体 代码 如 下 : 


body{font-size:13px} 

/* 元 素 初始 状态 样式 */ 
.divInit{width:390px;height:55px;line-height:55px;padding-left:20px} 
.txtInit{border:#666 lpx solid;padding:3px;background-image:url('Images/ 
bg email input.gif')} 
.spnInit{width:179px;height:40px;line-height:40px;float:right;margin-top: 
8px;padding-left:10px;background-repeat:no-repeat} 

/* 元 素 丢 失 焦 点 样式 */ 

.divBlur{background-color:#FEEEC2} 

.txtBlur{border:#666 lpx solid;padding:3px;background-image:url('Images/ 
bg email input2.gif')} 
.spnBlur{background-image:url('Images/bg email wrong.gif')} 
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/* div 获取 焦点 样式 */ 

.divFocu{background-color:#EDFFD5} 

/* 验证 成 功 时 span 样式 */ 
.spnSucc{background-image:url('Images/pic Fmail ok.gif');margin-top:20px} 
在 上 述 代码 中 ， 设 置 了 页 面 中 3 个 元 素 处 于 初始 状态 、 丢 失 焦 点 和 获取 焦点 的 样式 。 
下 面 编写 jQuery 代码 ， 实 现 邮箱 地 址 验证 功能 ， 有 具体 代码 如 下 。 


【范例 18-7 实现 邮箱 地 址 验证 功能 


.$(function() { 


$("#txtEmail") .trigger ("focus"); // 默 认 时 文本 框 获取 焦点 
$("#txtEmail") .focus (function() { // 文 本 框 获取 焦点 事件 


}) 


$ (this) .removeClass ("txtBlur") .addClass ("txtInit"); 

$ ("#email") .removeClass ("divBlur") .addClass ("divFocu"); 
$ ("#spnTip") .removeClass ("spnBlur") 

.removeClass ("spnSucc") .html ("请 输入 您 常用 邮箱 地 址 ! ") ; 


$ ("#txtEmail") .blur (function() { // 文 本 框 丢 失 焦点 事件 
Var vtxt = $("#txtEmail") .val (); // 获 取 文 本 框 对 象 
4£ (tzt. longth = 0) // 检 测 邮 箱 内 容 是 否 为 空 


]) 


在 上 述 代码 中 : 


$ (this) .removeClass ("txtInit") .addClass ("txtBlur"); 
$("#email") .removeClass ("divFocu") .addClass ("divBlur"); 
$("#spnTip") .addCclass ("spnBlur") .html ("邮箱 地 址 不 能 
2 
} 
else { 
if (!chkEmail (vtxt)) { // 检 测 邮 箱 格式 是 否 正确 
$ (this) .removeClass ("txtInit") .addClass ("txtBlur"); 
$("#email") .removeClass ("divFocu") .addClass 
("divBlur"); 
$("#spnTip") .addClass ("spnBlur") .html ("邮箱 格式 
不 正确 ! "); 
3 
else { // 如 果 正 确 
$ (this) .removeClass ("txtBlur") .addClass ("txtInit"); 
$("#email") .removeClass ("divFocu"); 
$("#spnTip") .removeClass ("spnBlur") .addClass 
("spnSucc") .html ("") 7 


e@ 第 2 行 代码 实现 文本 框 默 认 获取 焦点 。 
e@ 第 3~8 行 设置 文本 框 获取 焦点 时 的 处 理 方法 ， 主 要 涉及 3 个 元 素 的 样式 变化 。 其 中 第 
4 行 代码 表示 文本 框 对 象 获取 焦点 时 的 样式 变化 ， 由 于 该 对 象 获取 焦点 时 ， 有 可 能 


即 先 删除 原先 加 载 过 的 页 面 样 式 ， 然 后 增加 本 身 事件 中 的 样式 。 不 过 第 11 行 对 邮箱 
内 容 是 否 为 空 进行 判断 ， 第 17 行 对 邮箱 格式 进行 判断 ， 通 过 调用 判断 邮箱 格式 的 方 


法 chkEmail() 来 实现 。 
自 定义 方法 chkEmail0 实 现 判 断 邮 箱 地 址 的 格式 功能 ， 具 体内 容 如 下 。 
/* 
* 验 证 邮箱 格式 是 否 正确 
* 参 数 strEmail， 需 要 验证 的 邮箱 
eh 


function chkEmail (strEmail) { 
if (Il/~\wt([-+.]\wt)*@\wt([-.]\wt)*\.\wt([-.]\w+)*$/.test (strEmail)) 
{ 
return false; 
} 
else { 
return true; 
$ 
} 


当 加 载 页 面 时 ， 邮 箱 输入 框 默 认 获取 焦点 。 当 文本 框 元 素 获 取 焦点 时 ， 不 仅 样式 发 生变 
化 ， 同 时 提示 用 户 输入 邮箱 的 方法 ， 运 行 效果 如 图 18-25 所 示 。 


| 口 邮箱 闻 址 校 闪 功能 
€ Br C|| 图 -二 
罗 访问 最 多 外 言 新手 上 路 











当 否 为 空 。 如 果 不 为 空 或 
者 邮箱 地 址 格式 不 正确 ， 样 式 将 再 次 发 生变 化 ， 同 时 提示 出 错 信 息 ， 运 行 效 果 分 别 如 图 18-26 
和 图 18-27 所 示 。 
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) 邮箱 地 址 校 验 功能 - 和 ozilla Firefoz [ ) 好 征地 址 校区 功能 -和 ozilla Firefor 
文件 于 ) 锯 辑 人 E) 查看 人 ) 历史 名 ”书签 @) 工具 上 天助 文件 全) 编 枪 和) 查看 QW) 历 守 GG) 和 莹 四 工具 巴 帮助 四 
加 邮箱 地 二 术 验 功能 最 箱 地 十 核验 功能 | 

777T”】 cj] 加 -于 月 四- 会 和 ~ 所 Be @Trcl 回 -5 月 久 |- 会 9|- 
国 访问 最 多 站] 留言 二 新 手 上 路 [jquery0l. htnl 园 访问 最 多 [留言 门 新 手 上 路 [] jmnery0l htnl 








肥 征 : 4 邮箱 地 址 不 能 为 字 ! 和 1 邮箱 格式 不 正确 ! 

















图 18-26 邮箱 地 址 内 容 为 空 效果 图 18-27 邮箱 格式 不 正确 效果 


如 果 邮 箱 地 址 格式 正确 ， 样 式 将 返回 初始 状态 ， 并 显示 一 个 打 勾 的 图 片 ， 运 行 效果 如 图 
18-28 所 示 。 
) 邮箱 地 址 校 验 功能 - ozilla Firefox 辕 占 加] 


文件 四 编辑 查看 WD 历史 GE) 书签 四 工具 四 帮助 0 
] 邮箱 地 址 校 验 功 能 出 | 


€ Oril1/Q Cl 图 -PP 合 |- 会 和 ~ tt 
国 访问 最 多 上] 留言 门 新 手 上 路 jquery01. htnl 





邮箱 ; 











cjgong@l126. com 








图 18-28 邮箱 格式 正确 效果 


18.6 实现 动态 效果 


所 有 页 面 设计 师 对 动画 都 非常 头疼 ， 但 是 只 要 拥有 了 jQuery 库 ， 就 会 成 为 别人 《那些 不 
知道 jQuery 的 人 ) 眼 里 的 动画 高 手 。jQuery 库 中 提供 了 众多 动画 与 特性 方法 ， 通 过 少量 的 几 
行 代码 就 可 以 实现 元 素 的 飞 动 、 淡 入 淡出 等 动画 效果 ， 而 且 还 支持 各 种 自 定义 动画 效果 。 


18.6.1 jQuery 库 所 支持 的 动画 方法 

在 着 手 给 页 面 添加 很 酷 的 动画 效果 之 前 ， 首 先 要 了 解 一 下 jQuery 库 所 支持 的 动画 方法 ， 
这 些 方法 主要 分 为 3 类 ， 即 基本 动画 方法 、 滑 动 动画 方法 和 淡 入 淡出 方法 。 

1. 基本 动画 方法 

jQuery 支持 7 种 基本 动画 方法 ， 详 情 如 表 18-24 所 示 。 
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表 18-24 基本 动画 方法 











名 称 说 明 
显示 隐藏 的 匹配 元 素 。 

ny 这 个 就 是 show( speed, Elise ) 无 动画 的 版 本 。 如 果 选 择 的 元 素 是 可 见 的 ， 这 个 方 
法 将 不 会 改变 任何 东西 。 无 论 这 个 元 素 是 通过 hide() 方 法 隐藏 的 还 是 在 CSS 中 设置 了 
display:none， 这 个 方法 都 将 有 效 

od 以 优雅 的 动画 显示 所 有 匹配 的 元 素 ， 并 在 显示 完成 后 可 选 地 触发 一 个 回调 方法 。 

[callback]) 可 以 根据 指定 的 速度 动态 地 改变 每 个 匹配 元 素 的 高 度 、 宽度 和 不 透明 度 。 在 jQuery 
1.3 中 ，padding 和 margin 也 会 有 动画 ， 效 果 更 流畅 
隐藏 显示 的 元 素 。 

hide( ) 这 个 就 是 hide( speed, [callback] ) 的 无 动画 版 。 如 果 选 择 的 元 素 是 隐藏 的 ， 这 个 方法 将 
不 会 改变 任何 东西 

i a 以 优雅 的 动画 隐藏 所 有 匹配 的 元 素 ， 并 在 显示 完成 后 可 选 地 触发 一 个 回调 方法 。 

[callback] ) 可 以 根据 指定 的 速度 动态 地 改变 每 个 匹配 元 素 的 高 度 、 宽度 和 不 透明 度 。 在 jQuery 
1.3 中，padding 和 margin 也 会 有 动画 ， 效 果 更 流畅 
切换 元 素 的 可 见 状态 。 

Lo 如 果 元 素 是 可 见 的 ， 切 换 为 隐藏 的 ， 如 果 元 素 是 隐藏 的 ， 切 换 为 可 见 的 
根据 switch 参数 切换 元 素 的 可 见 状态 〈true 为 可 见 ，false 为 隐藏 ) 。 

toggle( switch ) 如 果 switch 设 为 tue， 则 调用 show() 方 法 来 显示 匹配 的 元 素 ， 如 果 switch 设 为 false 


toggle( speed, 
[callback] ) 





则 调用 hide0 来 隐藏 元 素 

以 优雅 的 动画 切换 所 有 匹配 的 元 素 ， 并 在 显示 完成 后 可 选 地 触发 一 个 回调 方法 。 

可 以 根据 指定 的 速度 动态 地 改变 每 个 匹配 元 素 的 高 度 、 宽 度 和 不 透明 度 。 在 jQuery 
1.3 中，padding 和 margin 也 会 有 动画 ， 效 果 更 流畅 





2. 滑动 动画 方法 
jQuery 支持 3 种 滑动 动画 方法 ， 详 情 如 表 18-25 所 示 。 


表 18-25 滑动 动画 方法 





名 称 


slideDown(speed, 


说 明 
通过 高 度 变 化 《向 下 增 大 ) 来 动态 地 显示 所 有 匹配 的 元 素 ， 在 显示 完成 后 可 选 地 触 
发 一 个 回调 方法 。 

















[callback]) 这 个 动画 效果 只 调整 元 素 的 高 度 ， 可 以 使 匹配 的 元 素 以 “滑动 ”的 方式 显示 出 来 。 
在 jQuery 1.3 中 ， 上 下 的 padding 和 margin 也 会 有 动画 ， 效 果 更 流畅 

slideUp(speed, 通过 高 度 变 化 (向 上 减 小 ) 来 动态 地 隐藏 所 有 匹配 的 元 素 ， 在 隐藏 完成 后 可 选 地 触 

[callback]) 发 一 个 回调 方法 

slideToggle(speed，| 通过 高 度 变化 来 切换 所 有 匹配 元 素 的 可 见 性 ， 并 在 切换 完成 后 可 选 地 触发 一 个 回调 

[callback]) 方法 








335 


3. 淡 入 淡出 动画 方法 
jQuery 支持 3 种 淡 入 淡出 动画 方法 ， 详 情 如 表 18-26 所 示 。 
表 18-26 淡 入 淡出 动画 方法 





名 称 说 明 

通过 不 透明 度 的 变化 来 实现 所 有 匹配 元 素 的 淡 入 效果 ， 并 在 动画 完成 
后 可 选 地 触发 一 个 回调 方法 。 

这 个 动画 只 调整 元 素 的 不 透明 度 ， 也 就 是 说 所 有 匹配 的 元 素 的 高 度 和 
宽度 不 会 发 生变 化 

通过 不 透明 度 的 变化 来 实现 所 有 匹配 元 素 的 淡出 效果 ， 并 在 动画 完成 
后 可 选 地 触发 一 个 回调 方法 


把 所 有 匹配 元 素 的 不 透明 度 以 渐进 方式 调整 到 指定 的 不 透明 度 ， 并 在 
动画 完成 后 可 选 地 触发 一 个 回调 方法 





fadeIn( speed, [callback] ) 





fadeOut( speed, [callback] ) 





fadeTo(speed, opacity, [callback]) 





18.6.2 实现 可 折 倒 的 列表 


浏览 计算 机 中 的 文件 系统 时 ， 经 常会 采用 一 种 “渐进 式 公开 ”的 形式 ， 即 会 以 层次 结构 
列表 形式 展示 所 有 文件 。 同 样 ， 为 了 避免 用 户 迷 失 在 页 面 的 海量 信息 中 ， 也 会 以 “渐进 式 公 
开 ” 的 形式 展示 信息 ， 也 就 是 所 谓 “ 可 折合 列表 ”效果 。 

下 面 通过 应 用 jQuery 库 实现 “可 折 镭 列表” 效果， 具体 内 容 见 【范例 18-8】。 在 具体 实 
现时 ， 要 设计 一 个 包含 列表 信息 的 页 面 ， 其 HTML 代码 如 下 : 


1 <fieldset> 

2 <legend> 可 折 肥 的 列表 </1legend> <!-- 标 题 --> 
加 <ul> <!-- 列 表 信息 --> 
4. <1i> 列 表 1</1i> 

BE <1i> 列 表 2</1i> 

6 i 

列表 3 

8 <ul> 

9, <1i> 列 表 3.1</1i> 

10。 > 

5 列表 3.2 

2 <ul> 

3 <1i> 列 表 3.2.1</1i> 

和 <1i> 列 表 3.2.2</1i> 

TH <1i> 列 表 3.2.3</1i> 

二 全 5 </ul> 

7 </1i> 

8 <1i> 列 表 3.3</1i> 

Ts </ul> 
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20. 
2 
2 
和 2 
24. 
Oe 


oaroGDop 


上 
[= 


</ul> 
</fieldset> 
</body> 


下 面 编写 jQuery 代码 ， 实 现 可 折 对 效果 功能 ， 具 体 代 码 如 下 : 


【范例 18-8 实现 可 折 又 功能 】 
$ (function(){ 


$('1i:has(u1)') // 选 择 拥 有 子 列表 的 所 有 列表 项 
.Click (function (event){ // 绑 定单 击 事件 
if (this == event.target) { 
if ($(this) .children() .is(':hidden')) { // 展 开 列 表 信 息 
$ (this) 


.Css('list-style-image', 'url (Images/minus.gif)') 
.children() .show(); 
} 
else { 
$ (this) // 折 全 列表 信息 
.Css('list-style-image', 'url (Images/plus.gif)') 
.children() .hide(); 
} 
} 
return false; 
a! 
.Css('cursor', 'pointer') 
“Click()s 
$('li:not(:has(u1))').css({ // 设 置 叶子 项 元 素 的 样式 
cursor: '‘'default', 
"list-style-image':'none' 
I 
Dyn 


在 上 述 代码 中 : 


ee 第 2 行 代码 通过 li:has(ul) 获 取 拥 有 子 列表 的 所 有 列表 项 。 

e@ 第 4~19 行 实现 展开 和 折 苔 列表 的 功能 ， 其 中 第 4~9 行 实现 展开 列表 信息 ， 第 4 行 代 
码 实现 获取 发 生 单 击 事件 的 列表 项 ( 父 列表 元 素 ) ， 第 5 行 通过 $(this).children().is 
(:hidden) 代 码 获取 父 列表 元 素 对 象 中 的 所 有 子 列表 ， 第 7 行 代码 通过 css() 方 法 重新 设 
置 列表 图 片 ， 第 8 行 通过 “.children0.showO” 代 码 实现 子 列表 元 素 显 示 。 其 中 第 
11~19 行 实现 折 梧 列表 信息 。 

@ 第 20~23 行 设置 叶子 项 元 素 的 样式 。 
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e@ 在 浏览 器 中 运行 页 面 ， 效 果 如 图 18-29 所 示 ; 单 击 “列表 3” 列 表 元 素 后 ， 
18-30 所 示 ; 单 击 “ 列 表 3.2” 列 表 元 素 后 ， 效 果 如 图 18-31 所 示 。 


) 可 折 短 的 列表 - Wozilla Firefox 


文件 如 铀 短 加 ) 查看 中。 历史 全 ) 书签 由 工具 CD) 帮助 0 
可 折 要 的 列表 Lt 


) 可 折 枯 的 列表 - Hoxilla Firefox | € iu///O c|| 国 -P| @l- 会 9j- tb- 
编辑 上 E) 查看 如 D 历史) 书签 @) 工具 人 0 帮助 0 访问 量 多 留言 门 新 手 上 路 
| 本 可 新 委 的 列表 国 


| "i 
。 列 表 1 
jqueryOl, htnl :和 


] jiquery0L htnl 


风 访问 最 多 门 留言 门 新 手 上 路 
可 折 双 的 列表 


9 
。 列 表 1 日 
。 列 表 2 
田 列表 3 
田 列表 4 
。 列 表 5 





18-29 加 载 页 面 图 18-30 单 击 “ 列 表 3” 


) 可 折 状 的 列表 - Wozilla Firefox 
文件 中 六 名 于) 查看 WD 历史 G) 书签 包 工具 中 帮助 0 
| 口 可 折 各 的 列表 图 

F Br/ 加 CI 图 -6P@- 人 会 9 
访问 最 多 留言 站 新 手 上 路 二 jquery0l htl 

可 折 琶 的 列表 


。 列 表 1 





图 18-31 单 击 “列表 3.2” 


18.6.3 淡 入 淡出 效果 


所 请 淡 入 淡出 效果 ， 就 是 通过 元 素 渐渐 变换 背景 色 的 动画 效果 来 显示 或 隐藏 元 素 ， 通 过 
jQuery 所 提供 的 淡 入 淡出 方法 可 以 容易 地 实现 该 效果 。 下 面 通过 应 用 jQuery 库 实现 上 述 要 
求 ， 具 体内 容 见 【范例 18-9】。 


在 具体 实现 时 ， 要 设计 一 个 包含 两 个 按钮 和 显示 内 容 DIV 标签 元 素 的 页 面 ， 其 HTML 
代码 如 下 : 
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1.<body> 

名 <div class="divFrame"> 

3 <!-- 两 个 操作 按钮 --> 

4 <div class="divTitle"> 

5. <input id="Buttonl" type="button" value=" 淡 入 按钮 " class="btn" /> 
6 <input id="Button2" type="button" value=" 淡 出 按钮 " class="btn" /> 
又 </div> 

8 <!-- 显 示 图 片 --> 

9 <div class="divContent"> 

0 <div class="divTip"></div> 

i <img src="Images/img05.jpg" alt="" title=" 设 备 图 片 " /> 

2 </div> 

3 </div> 

14.</body> 


下 面 编写 jQuery 代码 ， 实 现 淡 入 淡出 效果 功能 ， 具 体 代码 如 下 : 
【范例 18-9 实现 淡 入 淡出 功能 】 


i $(function() { 

2 $img = $("img"); // 获 取 图 片 元 素 对 象 
3 Stip = $(".divTip"); // 获 取 提示 信息 对 象 
4. $("input:eq(0)") .click(function() { // 第 一 个 按钮 单 击 事件 
Bs SEip Een) // 清 空 提示 内 容 

6. // 在 3000 毫秒 中 淡 入 图 片 ， 并 执行 一 个 回调 方法 

了 < $img.fadeIn(3000, function() { 

8. Stip.html (" 淡 入 成 功 ! ")， 

9 }) 

10. 小 

11 $ ("input:eq(1)").click(function() { // 第 二 个 按钮 单 击 事件 
2 S$tip.html (""); // 清 空 提示 内 容 

3 // 在 3000 毫秒 中 淡出 图 片 ， 并 执行 一 个 回调 方法 

A $img.fadeOut (3000, function() { 

Stip.html ("淡出 成 功 ! "); 

16. 3 

ds }) 

18. }) 


在 上 述 代码 中 : 


e 第 2~3 行 获取 图 片 元 素 对 象 和 提示 信息 对 象 。 

@ 第 4-10 行 设 置 单 击 “ 淡 入 按钮 ”按钮 的 处 理 方法 ， 其 中 第 5 行 清空 提示 内 容 ， 然 后 
调用 fadeIn() 方 法 对 图 片 对 象 实现 淡 入 效果 。 

@ 第 11~17 行 设置 单 击 “ 淡 出 按钮 ”按钮 的 处 理 方法 ， 其 中 第 12 行 清空 提示 内 容 ， 然 
后 调用 fadeOut() 方 法 对 图 片 对 象 实现 淡出 效果 。 
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在 浏览 器 中 运行 页 面 ， 效 果 如 图 18-32 所 示 ; 单 击 “淡出 按钮 ”按钮 后 ， 效 果 如 图 18-33 
所 示 ; 单 击 “ 淡 入 按钮 ”按钮 后 ， 效 果 如 图 18-34 所 示 。 


) 淡 入 淡出 效果 orilla Firefox 
文件 四、 扩 儿 全) 查看) 历史 G) 书签 @) 工具 GD 帮助 四 
| 淡 入 淡出 效果 | 污 入 淡出 效果 lid 

ETX>】 c| 国 -5P @@j- 会 9|- Ex/O =|[ 男 -5 月 @l- 会 9|- 
国 访问 最 多 留言 新 手 上 路 jqueryO1, htal 加 访问 最 多 留言 新 手 上 路 jqueryO1. htnl 


淡 入 按 甸 | | 淡出 按 乌 | [六 入 按钮 淡出 按钮 





DD 


图 18-32 加 载 页 面 图 18-33 单 击 “ 淡 出 按钮 ” 


) 淡 入 淡出 效果 -Mozilla Firefox 
文件 E) 乌 回 如 ”查看 WD 历史 G) 书签 @@] 工具 G) 帮助 中 
谈 入 滨 册 效果 EE 
ET 】 cj 图 -5 户 合 | 介 9 
疗 访 问 最 多 门 入 言 门 拳手 上 路 站] jaory0l_ htal 


[本 [tia 





图 18-34 单 击 “ 淡 入 按钮 ” 


18.7 相关 参考 


e jQuery 库 一 一 http://jquery.com/。 
e jQuery 库 API 一 一 http://api.jquery.com/。 
e jQuery 库 博 客 园 一 一 http://kb.cnblogs.com/zt/jquery/。 
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第 19 竟 用 户 交 互 操作 、 进 度 条 和 
滑动 条 美化 页 面 


美的 形象 是 丰富 多 彩 的 ， 而 美 也 是 到 处 出 现 的 。 人 类 本 性 中 就 有 普遍 的 爱美的 要 求 。 
一 一 黑 格 尔 


设计 合理 、 内 容 丰 富 和 页 面 漂亮 的 网 站 ， 总 会 受到 浏览 者 的 喜欢 和 光顾 。 本 章 将 详细 介 
绍 如 何 通过 jQuery UI 插件 中 的 拖 动 和 拖 放 组 件 、 进 度 条 和 滑动 条 组 件 来 美化 页 面 。 
本 章 主要 知识 点 : 


。 拖 动 组 件 
。 拖 放 组 件 
。 进度 条 工具 集 
日 滑动 条 工具 集 


19.1 页 面 中 的 交互 操作 


在 任何 项 目的 界面 中 ， 与 鼠标 指针 交互 都 是 设计 中 的 核心 组 成 部 分 。 虽 然 许多 简单 鼠标 
交互 都 内 建 在 界面 里 (例如 单 击 等 ) ， 但 是 并 不 支持 高 级 交互 方式 。 

在 Windows 系统 中 ， 经 常会 涉及 一 些 与 鼠标 的 交互 操作 一 一 拖 动 和 拖 放 。 例 如 在 文件 夹 
之 间 拖 动 文件 或 在 文件 系统 中 四 处 移动 文件 ， 甚 至 把 文件 拖 放 到 回收 站 以 实现 删除 文件 功 
能 。 那 么 在 浏览 器 中 也 可 以 实现 这 些 效果 吗 ? 答案 是 肯定 的 ， 不 过 需要 利用 jQuery UI 框架 
中 的 拖 动 和 拖 放 组 件 。 


19.1.1 jQuery UI 所 支持 的 拖 动 组 件 


jQuery UI 插 件 的 拖 动 组 件 ， 可 以 实现 在 页 面 中 拖 来 拖 去 的 效果 。 只 要 单 击 页 面 中 的 拖 动 
组 件 对 象 ， 并 拖 动 鼠标 就 可 以 将 其 移动 到 浏览 器 区 域内 的 任意 位 置 。 
在 页 面 中 使 用 jQuery UI 插件 的 拖 动 组 件 ， 需 要 经 过 如 下 步骤 。 


EI) 


在 页 面 代 码 的 head 标签 元 素 中 添加 拖 动 组 件 支持 的 类 库 、 样 式 表 等 资源 ， 有 具体 内 
容 如 下 


<script src="jquery-3.2.1.js"></script> 


<script src="jquery-ui.js"></script> 


<link href="jquery-ui.css" rel="stylesheet"> 
<script src="jquery-ui.css"></script> 


B02 通过 draggable() 方 法 封装 DOM 对 象 为 jQuery 对 象 ， 该 方法 的 具体 语法 如 下 : 


$ (selector). draggable(); 


其 中 ，selector 是 选择 器 ， 用 于 选择 将 被 封装 成 拖 动 组 件 的 对 象 。 





人 3 根据 具体 需求 ， 通 过 方法 draggable(options) 设 置 拖 动 组 件 对 象 的 配置 选项 ， 以 达到 
预期 的 效果 。 拖 动 组 件 的 配置 选项 内 容 如 表 19-1 所 示 。 
表 19-1 拖 动 组 件 的 常见 配置 选项 
名 称 属性 值 说 明 
addClasses boolean 是 否 为 可 拖 动 元 素 应 用 ui-draggale 类 


appendTo element 


cancel Selector 
connectToSortable | selector 


containment 


Cursor 


CursorAt 


Selector, element, 
string, array 


string 


object 


为 可 拖 动 元 素 指定 到 一 个 容器 

限制 可 拖 动 元 素 沿 着 一 个 轴 移动 ， 可 以 为 x (水 平 ) 或 者 y〈 垂 
直 ) 

指定 不 能 被 拖 动 的 元 素 

是 否 关联 到 一 个 可 排序 列表 上 ， 使 之 成 为 排序 元 素 

阻止 将 元 素 拖 出 指定 元 素 或 区 域 的 边界 


指定 光标 指针 位 于 可 拖 动 元 素 上 时 使 用 的 CSS cursor 属性 
指定 一 个 默认 的 相对 位 置 ， 拖 动 对 象 时 光标 将 在 这 里 出 现 





delay 


integer 


指定 开始 拖 动 时 延 时 多 少 毫秒 





distance 


integer 





handle elment,selector 


按 下 光标 后 开始 拖 动 前 必须 移动 鼠标 的 距离 
使 可 拖 动 元 素 对 齐 页 面 上 的 一 个 虚拟 网 格 
在 可 拖 动 元 素 中 指定 用 于 放置 拖 动 指针 的 特定 区 域 

















helper string,function 指定 拖 动 时 显示 的 辅助 元 素 

iframeFix boolean,selector 是 否 阻止 iframe 元 素 在 拖 动 时 捕获 mousemove 事件 
‘opacity float 指定 拖 动 过 程 中 辅助 元 素 的 不 透明 度 
refreshPositions boolean 是 否 在 每 次 拖 动 的 mousemove 事件 中 重新 计算 位 置 
revert boolean,string 是 否 在 拖 动 之 后 自动 回 到 原始 位 置 
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( 续 表 ) 























名 称 属性 值 说 明 

revertDuration integer 指定 元 素 返 回 其 原始 位 置 时 所 需要 的 毫秒 数 

scope string 用 来 指定 一 个 拖 放 元 素 组 合 ， 通 常 与 droppable 集合 使 用 
scroll boolean 指定 是 否 在 拖 动容 器 时 元 素 自动 滚动 

scrollSensitivity integer 指定 可 拖 动 元 素 在 距离 容器 边缘 多 远 时 容器 开始 滚动 
scrollSpeed integer 指定 容器 元 素 的 滚动 速度 

snap boolean,selector 指定 可 拖 动 元 素 在 靠近 元 素 时 是 否 自 动 对 齐 到 边缘 
snapMode string 指定 自动 对 齐 目 标 元 素 的 方式 

snapTolerance integer 指定 可 拖 动 元 素 距离 目标 元 素 多 远 时 开始 自动 对 齐 

stack object 确保 当前 拖 动 对 象 总 是 位 于 同一 组 中 其 他 拖 动 对 象 的 上 方 
zlndex integer 设置 拖 动 过 程 中 辅助 元 素 的 z-index 值 











如 果 想 在 页 面 中 灵活 地 使 用 拖 动 组 件 ， 除 要 了 解 该 组 件 的 使 用 步骤 和 配置 选项 之 外 ， 还 
需要 了 解 它 的 方法 和 事件 ， 请 见 表 19-2 和 表 19-3。 





表 19-2 拖 动 组 件 的 常用 方法 
































名 称 说 明 
diteoy 禁止 可 拖 动 元 素 的 拖 动 功能 

disable 从 一 个 拖 动容 器 中 完全 删除 可 拖 动 元 素 并 使 该 对 象 返回 到 初始 化 状态 
站 重新 激活 可 拖 动 元 素 的 可 拖 动 功能 

i 获取 或 者 设置 可 拖 动 元 素 的 配置 属性 

表 19-3 拖 动 组 件 的 常用 事件 

名 称 说 明 

二 在 拖 动 可 拖 动 元 素 过 程 中 移动 鼠标 时 触发 
[a 开始 拖 动 可 拖 动 元 素 时 触发 
| 停止 拖 动 可 拖 动 元 素 时 触发 











19.1.2 jQuery UI 所 支持 的 拖 放 组 件 


在 jQuery UI 插件 中 ， 除 可 以 使 用 拖 动 组 件 对 页 面 中 的 元 素 进行 拖 动 之 外 ， 还 可 以 通过 
拖 放 组 件 保存 拖 动 组 件 操作 的 对 象 。 也 就 是 说 ， 拖 放 组 件 主要 用 来 为 拖 动 组 件 所 操作 的 元 素 


提供 存放 位 置 。 
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在 页 面 中 使 用 jQuery UI 插件 的 拖 放 组 件 ， 需 要 经 过 如 下 步骤 。 
人 To 在 页 面 代码 的 head 标签 元 素 中 添加 拖 动 组 件 支持 的 类 库 、 样 式 表 等 资源 ， 具 体内 
容 如 下 : 


<script src="jquery-3.2.1.js"></script> 
<script src="jquery-ui. js"></script> 
<link href="jquery-ui.css" rel="stylesheet"> 


本 02 通过 droppable() 方 法 封装 DOM 对象 为 jQuery 对 象 ， 该 方法 的 具体 语法 如 下 : 
$ (selector) .droppable(); 
其 中 ，selector 是 选择 器 ， 用 于 选择 将 被 封装 成 拖 放 组 件 的 对 象 。 


人 3 根据 具体 需求 ， 通 过 方法 droppable(options) 设 置 拖 放 组 件 对 象 的 配置 选项 ， 以 达到 
预期 的 效果 。 拖 放 组 件 的 配置 选项 内 容 如 表 19-4 所 示 。 


表 19-4 拖 放 组 件 的 常见 配置 属性 











名 称 属性 值 说 明 
i 设置 拖 放 元 素 可 接受 的 元 素 

activeClass | string 。 | 设置 可 接受 的 元 素 处 于 拖 动 状态 时 应 用 的 CSS 类 
addClasses 设置 是 否 允许 对 拖 放 元 素 添 加 ui-droppable 类 
eco 设置 是 否 在 媒 套 的 拖 放 元 素 中 阻止 事件 的 传播 
hoverOlass | string ”| 设置 拖 放 元 素 在 拖 动 对 象 移动 到 其 中 应 用 的 CSS 类 
i | string 。 ”| 设置 拖 动 对 象 和 拖 放 目 标 集 

oiled | string ”| 设置 可 接受 的 拖 动 元 素 完成 拖 放 的 触发 模式 





如 果 想 在 页 面 中 灵活 地 使 用 拖 放 组 件 ， 除 要 了 解 该 组 件 的 使 用 步骤 、 配 置 选项 之 外 ， 还 
需要 了 解 它 的 方法 和 事件 。 拖 放 组 件 的 方法 与 拖 动 组 件 所 支持 的 方法 区 别 不 大 ， 此 处 不 再 组 
述 ， 该 组 件 所 支持 的 事件 如 表 19-5 所 示 。 





表 19-5 拖 放 组 件 的 常用 事件 























事件 名 说 明 
页 的 证 当 所 接受 的 对 象 开始 拖 动 时 触发 

rill | 开始 拖 动 元 素 时 触发 

et 当 所 接受 的 对 象 停止 拖 动 时 触发 

当 所 接受 的 对 象 放置 在 目标 对 象 上 方 时 触发 

ou | 当 所 接受 的 对 象 移出 目标 对 象 时 触发 

ot 当 所 接受 的 对 象 位 于 目标 对 象 上 方 时 触发 
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19.1.3 模拟 Windows 系统 “回收 站 ” 
若 要 模仿 Windows 系统 的 “回收 站 ”功能 ， 具 体 要 求 如 下 : 
@ 对 于 列表 中 的 图 片 ， 可 以 通过 拖 动 或 单 击 “ 删 除 ”链接 ， 以 动画 方式 移 至 “回收 


站 ”。 
e@ 对 于 “回收 站 ”中 的 图 片 ， 可 以 通过 拖 动 或 单 击 “ 还 原 ” 链 接 ， 以 动画 方式 “还 原 ” 
到 图 片 列表 。 


该 案例 的 初始 效果 如 图 19-1 所 示 。 在 图 片 列 表 里 ， 当 鼠标 单 击 图 片 〈 第 一 张 ) 时， 出 现 
移动 鼠标 样式 后 ， 就 可 以 直接 拖 动 该 图 片 到 “回收 站 ”。 或 者 直接 单 击 图 片 (第 二 张 ) 下 面 
的 “删除 ”链接 ， 也 可 以 达到 上 述 效果 ， 删 除 后 的 效果 如 图 19-2 所 示 。 

) 件 以 扼 动 方式 管理 相册 - ozilla Firefox 
TE 历史 加 i 工具 四 
人 file /110: /新 写 的 12 31/ 代 码 , @ C | 图 -5 度 人 
访问 量 多 门 留言 下 新 竹 上 路 全 janery0l htal 


弛 | 
§ @ file/110:/ 杨 写 的 12 31/ 代 到 加 C | 图 - 有 度 所 月 
畏 访 月 景 多 留言 站 新 手 上 路 全 ”janery0l htal 





图 19-2 删除 后 的 效果 





在 “回收 站 ”里 ， 当 鼠标 单 击 图 片 〈 第 一 张 ) 时 ， 出 现 移动 鼠标 样式 后 ， 就 可 以 直接 拖 
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动 该 图 片 到 图 片 列表 里 〈 效 果 如 图 19-3 所 示 ) 。 或 者 直接 单 击 图 片 〈 第 二 张 ) 下 面 的 “还 
原 ” 链 接 ， 也 可 以 达到 上 述 效 果 。 
) 件 以 扼 动 方式 管理 相册 - Hozilla Firefox 
文件 到 ) 入 辑 时 】 查看 中 历史 多) 书签 也 ) 工具 I) 帮助 中 
] 件 以 接 动 方式 痢 理 相册 局 | 
@ fs:1: 高 写 的 12.31/ 代 码 @ CI 图 -5 T 户 | 合 |- 会 





国 访问 最 多 [留言 二 ] 新 手 上 路 jquery0l hel 


2010 第 型 只 2006 和 








图 19-3 还 原 效果 
在 具体 实现 时 ， 要 设计 一 个 包含 图 片 列表 和 “回收 站 ”的 页 面 ， 其 HTML 代码 如 下 : 
bd <body> 
加 和 <div class="phframe"> 
9 <!-- 图 片 列表 --> 
4. <ul id="photo" class="photo"> 
Ss <1li class="photoframecontent photoframetr"> 
Ge <h5 class="photoframeheader">java</h5> 
1 <!-- 图 片 标题 --> 
8 <img src="Images/img01.jpg" alt="2006 年 图 书 作 品 " width="85" 
height="120" /> 
9. <!-- 加 载 图 片 --> 
LO <span>2006 年 </span> 
Le <!-- 显 示 图 片 信息 --> 
2 <a href="#" title=" 放 入 回收 站 "class="phtrash"> 删 除 </a> 
35 <!-- 删 除 链接 --> 
14. </1i> 
Ds <1i class="photoframecontent photoframetr"> 
16。 <h5 class="photoframeheader">java web</h5> 
Ee <img src="Images/img02.jpg" alt="2008 年 图 书 作 品 " width="85" 


height="120" /> <span>2008 年 
18 . </span> <a href="#" title=" 放 入 回收 站 "” class="phtrash"> 删 除 </a> </1i> 


9 <li class="photoframecontent photoframetr"> 
20. <h5 class="photoframeheader">java web 模块 </h5> 
2 <img src="Images/img03.jpg" alt="2010 年 图 书 作 品 " width="85" 


height="120" /> <span>2010 年 
2 </span> <a href="#" title=" 放 入 回收 站 "” class="phtrash"> 删 除 </a> </1i> 
疙 23 </ul> 
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2 <!-- 回 收 站 --> 


2 <div id="trash" class="photoframecontent"> 
26. <h4 class="photoframeheader"> 回 收 站 </h4> 
A </div> 


OE </div> 
29。 </body> 


在 上 述 代码 中 ， 第 4~23 行 用 来 实现 图 片 列表 ; 第 25~27 行 用 来 实现 “回收 站 ”。 
为 了 便于 实现 拖 动 和 拖 放 功能 ， 需 要 引入 jQuetry UI 插件 中 的 如 下 js 文件 : 





<script src="jquery-3.2.1.js"></script> 
<script src="jquery-ui.js"></script> 
<link href="jquery-ui.css" rel="stylesheet"> 


上 述 导 入 的 js 文件 中 ，jquery-uijs 为 jQuery UI 的 核心 库 ，jquery-ui.css 为 核心 样式 文件 。 
下 面 编 写 jQuery 代码 ， 实 现 图 片 管理 功能 ， 具 体 代 码 如 下 。 


【范例 19-1 实现 图 片 管理 功能 】 


‘i $ (function() { 

2 // 使 用 变量 缓存 DOM 对 象 

3 Var $photo = $("#photo"); 

4. Var Strash = $("#trash"); 

5 // 可 以 拖 动 包含 图 片 的 表 项 标记 

6. $ ("li", $photo) .draggable({ 

7 revert: "invalid"，// 在 拖 动 过 程 中 ， 停 止 时 将 返回 原来 位 置 
8 helper: "clone"，// 以 复制 的 方式 拖 动 
9. cursor: "move" 

10. Pw 

是 二 // 将 图 片 列表 的 图 片 拖 动 到 回收 站 

2 Strash.droppable({ 

13% accept: "#photo 1i", 

14. activeClass: "highlight", 

Ti drop: function (event，ui) { 

163 deleteImage (ui .draggable); 
7。 [| 

18 ]) 7 

9 // 将 回收 站 中 的 图 片 还 原 至 图 片 列表 

20. $photo.droppable ({ 

之 证 accept: "#trash 1i", 

22。 activeClass: "active", 

3 drop: functionl(event, ui) { 

这 及。 recycleImage (ui .draggable); 
25s } 

26% Bs 

27 // 自 定义 图 片 从 图 片 列表 中 删除 拖 动 到 回收 站 的 函数 
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28. var recyclelink = "<a href='#' title=' 从 回收 站 还 原 ' class= 
'phrefresh'> 还 原 </a>"; 


29。 function deleteImage ($item) { 

30. $item.fadeOut (function() { 

3 var $list = $("<ul class='photo reset'/>") .appendTo ($trash); 

32. $item.find("a.phtrash") .remove(); 

33。 $item.append (recyclelink) .appendTo($1ist) .fadeIn(function() { 

34. $item 

353 .animate({ width: "6lpx" }) 

36 .find("img") 

5 局 .animate({ height: "86px" }); 

38k 

39。 ]) 7 

40. } 

A // 自 定义 图 片 从 回收 站 还 原 至 图 片 列表 时 的 函数 

Ey 全 var trashlink = "<a href='#' title=' 放 入 回收 站 ' class= 'phtrash'> 删 除 
</a>"; 

43. function recycleImage ($item) { 

44. $item.fadeOut (function() { 

45. $item 

46. .find("a.phrefresh") 

江宁 .remove() 

48. .end() 

49. .Css("width", "85px") 

SO .append (trashlink) 

Sl .find("img") 

2 .Css("height", "120px") 

53 .end() 

与 .appendTo (SPhoto) 

55。 .fadeIn(); 

56. }) 7 

57s } 

Se // 根 据 图 片 所 在 位 置 绑 定 删除 或 还 原 事件 

有 9 $ ("ul.photo li") .click(function(event) { 

60. var $item = $ (this), 

G1: $target = $ (event.target); 

62. if ($target.is("a.phtrash")) { 

63 。 deleteImage ($item); 

64. } else if ($target.is("a.phrefresh")) { 

65, recycleImage ($item); 

66. } 

67.。 return false; 

68. Ws 

69, Wy 
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在 上 述 代码 中 : 


日 第 2~4 行 代码 获取 图 片 列表 和 回收 站 对 象 。 

e@ 第 6~10 行 代码 首先 在 $photo 对 象 里 查找 <li> 元 素 集 对 象 ， 然 后 通过 draggable() 方 法 设 
置 获取 的 对 象 集 可 以 进行 拖 动 。 

@ 第 12~18 行 代码 实现 将 图 片 拖 入 到 “回收 站 ”， 主 要 通过 droppable() 方 法 来 实现 ， 首 
先 通过 accept 设置 对 象 $trash 的 接受 对 象 为 "#photo li", 然 后 通过 drop 设置 图 片 拖 动 到 

“回收 站 ”时 触发 的 函数 deleteImage(); 第 29~40 行 定义 了 deleteImage() 方 法 ， 主 要 
实现 将 图 片 从 图 片 列表 里 删除 拖 动 到 “回收 站 ”。 

@ 第 20~26 行 代码 实现 将 “回收 站 ”里 的 图 片 还 原 到 图 片 列表 里 ， 主 要 通过 droppable() 
方法 来 实现 ， 首 先 通过 accept 设 置 对 象 Sphoto 的 接受 对 象 为 "#trash li"， 然 后 通过 drop 
设置 图 片 拖 动 到 图 片 列 表 时 触发 的 函数 recycleImage(); 第 43~57 行 定义 了 
recycleImage() 方 法 ， 主 要 实现 将 图 片 从 “回收 站 ”还 原 至 图 片 列表 。 

@ 第 59~68 行 代码 主要 实现 将 两 个 自 定义 函数 deleteImage() 和 recycleImage() 绑 定 到 删除 
和 还 原 事件 。 


19.2 页 面 中 的 进度 条 效果 


在 项 目 开发 的 页 面 中 ， 在 处 理 一 些 比较 复杂 的 业务 操作 时 ， 往 往 需要 用 户 等 待 。 为 了 防 
止 用 户 在 等 待 时 焦躁 不 安 ， 最 好 对 业务 的 操作 进行 提示 。 例 如 ， 在 Windows 系统 中 复制 文 
件 、 下 载 文件 时 ， 都 会 使 用 进度 条 ， 让 用 户 明 确 知 道 任务 执行 的 进度 。 所 谓 进度 条 ， 就 是 随 
着 时 间 的 推移 ， 用 动画 的 形式 显示 该 组 件 的 更 新 过 程 。 


19.2.1 jQuery UI 所 支持 的 进度 条 工具 集 


jQuery UI 插件 的 进度 条 工具 集 不 仅 界面 简单 、 美 观 ， 而 且 可 以 显示 百分比 进度 ， 同 时 还 
可 以 通过 CSS 样式 设置 该 工具 集 的 样式 。 不 过 需要 注意 ，jQuery UI 插件 中 的 进度 条 工具 集 
只 能 用 于 系统 更 新 当前 状态 ， 或 者 用 于 显示 长 度 比例 的 情况 。 
在 页 面 中 使 用 jQuery UI 插件 的 进度 条 工具 集 ， 需 要 经 过 如 下 步骤 。 
人 EXOD) 在 页 面 代码 的 head 标签 元 素 中 添加 进度 条 工具 集 所 支持 的 类 库 、 样 式 表 等 资源 ， 
具体 内 容 如 下 : 


<script type="text/javascript" src="jquery-3.2.1.js"></script> 
<script type="text/javascript" src="jquery-ui.js"></script> 
<link href="jquery-ui.css" rel="stylesheet"> 


人 通过 progressbar() 方 法 封装 DOM 对 象 为 jQuery 对 象 ， 该 方法 的 具体 语法 如 下 : 
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$ (selector). progressbar(); 
其 中 ，selector 是 选择 器 ， 用 于 选择 将 被 封装 成 进度 条 工具 集 的 对 象 。 


根据 具体 需求 ， 通 过 方法 progressbar(options) 设 置 进度 条 工具 集 的 配置 选项 ， 以 达 
到 预期 的 效果 。 进 度 条 工具 集 的 配置 选项 内 容 如 表 19-6 所 示 。 


表 19-6 进度 条 工具 集 的 常见 配置 选项 


属性 值 说 明 
设 轩 是 桂林 用 上 条 


interger 设置 进度 条 的 最 大 值 
interger 设置 进度 条 的 值 
















如 果 想 在 页 面 中 灵活 地 使 用 进度 条 工具 集 ， 除 要 了 解 该 工具 集 的 使 用 步骤 、 配 置 选项 之 
外 ， 还 需要 了 解 它 的 方法 和 事件 ， 该 工具 集 所 支持 的 事件 内 容 如 表 19-7 所 示 。 


表 19-7 进度 条 工具 集 的 常用 事件 









名 称 说 明 
| sge | 当 该 I 具 集 的 伟 必 变 H 角 发 | 
[compkete | 当 访 I 上 R 集 完成 B 季 发 
[vae | 当 抽 建 该 工具 集 时 触发 | 


对 于 该 工具 集 所 支持 的 方法 ， 除 destroy0)、disable()、enable(0、option0 和 widget() 方 法 之 
外 ， 还 提供 了 一 个 value() 方 法 ， 该 方法 可 以 获取 或 者 设置 进度 条 组 件 的 当前 值 。 


19.2.2 实现 进度 条 效果 


本 节 通 过 应 用 jQuery UI 插 件 中 的 进度 条 (Progressbar) 工具 集 实现 进度 条 效果 ， 具 体内 
容 见 【范例 19-2】。 

该 案例 的 初始 效果 如 图 19-4 所 示 。 经 过 3 秒 后 ， 该 进度 条 的 值 就 会 自动 改变 ， 如 图 19-5 
所 示 。 当 执行 完 后 ， 该 进度 条 就 会 显示 “Complete! ”字符 串 ， 如 图 19-6 所 示 。 


III PRRIISIIIIIIIIIIIIIII PY 
图 19-4 初始 效果 


图 19-5 改变 值 效 果 
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Complete! 


图 19-6 执行 完 效果 


在 具体 实现 时 ， 要 设计 一 个 包含 进度 条 和 显示 进度 条 信息 的 页 面 ， 其 HTML 代码 如 下 : 


<div id="progressbar" style="width: 37%;" > <!-- 进 度 条 --> 
<div class="progress-label">Loading...</div> <!-- 显 示 进 度 条 信息 --> 
</div> 


为 了 便于 实现 日 期 输入 框 功 能 ， 需 要 引入 jQuetry UI 插件 里 的 如 下 js 文件 : 


<script type="text/javascript" src="jquery-3.2.1.js"></script> 
<script type="text/javascript" src="jquery-ui.js"></script> 
<link href="jquery-ui.css" rel="stylesheet"> 


上 述 所 导入 的 js 文件 中 ，jquery-uijs 为 jQuery UI 的 核心 库 ，jquery-ui.css 为 核心 样式 文件 。 


下 面 编写 jQuery 代码 ， 实 现 进 度 条 值 改 变 功 能 ， 具 体 代码 如 下 : 
【范例 19-2 实现 进度 条 值 改 变 功 能 】 


1.$(function() { 

2 // 获 取 进 度 条 对 象 且 显 示 进度 条 信息 对 象 

3 Var progressbar = $( "#progressbar" ), 

4. ProgressLabel = $( ".progress-label" ); 

De Progressbar.progressbar ({ 

6. value: false，// 禁 用 滑动 条 的 值 

了 二 change: function() { // 当 进度 条 的 值 改变 后 触发 的 事件 

8. ProgressLabel.text (progressbar.progressbar ("value")+"%"); 
9。 }, 

10. complete: function() { // 当 进度 条 执行 完 后 触发 的 事件 
Ts progressLabel .text( "Complete!™" ); 

12.。 1 

135 WW 

function Progress () {// 实 现 改 变 进度 条 值 的 方法 

5 // 初 始 化 进度 的 值 

16. Var val = progressbar.progressbar( "value" ) || 0; 
7 /7 设置 进度 的 值 增加 1 

185 Progressbar.progressbar( "value", val + 1 ); 

9s 

20 A a 9 于 

Zs setTimeout ( progress，100 ) ;// 每 隔 0.1 秒 执 行 方 法 progress 
22。 } 

23 

4 setTimeout ( progress，3000 ) ; //3 秒 后 执行 方法 progress 
25.j)7 


在 上 述 代 码 中 : 
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第 3~4 行 代码 获取 进度 条 对 象 progressbar 并 显示 进度 条 信息 对 象 progressLabel。 

第 5~13 行 代 码 设置 进度 条 对 象 选项 ， 其 中 第 7~9 行 代码 实现 当 进 度 条 的 值 改变 后 甬 
发 的 事件 ， 在 该 事件 的 处 理 方法 中 调用 方法 progress()， 第 10~12 行 代码 实现 当 进 度 
条 执行 完 后 触发 的 事件 。 

第 14~23 行 代码 自 定 义 了 方法 progress()， 实 现 改变 进度 条 值 。 

第 24 行 代码 实现 3 秒 后 执行 方法 progress()。 


19.3 页 面 中 滑动 条 效果 


通过 jQuery UI 插件 中 的 滑动 条 〈Slider) 工具 集 可 以 很 容易 地 实现 “滑动 条 ”效果 。 所 
谓 滑动 条 效果 ， 就 是 背景 条 代表 一 系列 值 ， 可 以 通过 移动 背景 条 上 的 指针 选择 所 需要 的 值 。 
例如 ，Windows 系统 中 的 声音 调节 控件 (如 图 19-7 所 示 ) 、Photoshop 软件 里 的 颜色 调 色 
器 、 游 戏 中 的 记分 板 等 ， 都 会 使 用 滑动 条 ， 以 让 用 户 更 方便 地 选择 相应 的 值 。 


| 口 囊 音 四 ) | 口 玫 音 四 ) | 口 融 音 吧 ) 





图 19-7 声音 调节 控件 中 的 滑动 条 


19.3.1 jQuery UI 所 支持 的 滑动 条 工具 集 


jQuery UI 插件 的 滑动 条 工具 集 由 两 个 元 素 组 成 ， 分 别 为 滑动 柄 和 滑动 轨道 ， 其 中 滑动 柄 
可 以 被 鼠标 拖 动 或 者 随 着 方向 键 移动 。 
在 页 面 中 使 用 jQuery UI 插件 的 滑动 条 工具 集 ， 需 要 经 过 如 下 步骤 。 


全 Joi 在 页 面 代码 的 head 标签 元 素 中 添加 滑动 条 工具 集 所 支持 的 类 库 、 样 式 表 等 资源 ， 
具体 内 容 如 下 : 

















<script src="jquery-3.2.1.js"></script> 
<script src="ui/jquery-ui.js"></script> 
<link href="jquery-ui.css" rel="stylesheet"> 
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人 2 通过 slider() 方 法 封装 DOM 对 象 为 jQuery 对 象 ， 该 方法 的 具体 语法 如 下 : 
$(selector) .slider (); 
其 中 ，selector 是 选择 器 ， 用 于 选择 将 被 封装 成 滑动 条 工具 集 的 对 象 。 


人 3 根据 具体 需求 ， 通 过 方法 slider(options) 设 置 滑动 条 工具 集 的 配置 选项 ， 以 达到 预期 
的 效果 。 滑 动 条 工具 集 的 配置 选项 内 容 如 表 19-8 所 示 。 


表 19-8 滑动 条 工具 集 的 常见 配置 选项 








名 称 属性 什 说 明 

animate false 在 单 击 滑动 轨道 时 ， 为 滑动 柄 的 移动 激活 平滑 效果 的 动画 
disabled boolean 是 否 禁 用 滑动 条 工具 集 

站 | 100 | 设置 滑动 条 工具 集 滑动 柄 的 最 大 什 

in | 。 | 设置 滑动 条 工具 集 滑动 柄 的 最 小 值 

orientation | | 设置 滑动 条 工具 集 的 对 齐 方式 

i 在 两 个 滑动 条 工具 集 之 间 创 建 带 有 样式 的 区 域 

















sp | | wi 


如 果 想 在 页 面 中 灵活 地 使 用 滑动 条 工具 集 ， 除 要 了 解 该 工具 集 的 使 用 步骤 、 配 置 选 项 之 
外 ， 还 需要 了 解 它 的 方法 和 事件 ， 如 表 19-9 和 表 19-10 所 示 。 


表 19-9 滑动 条 工具 集 的 常用 方法 


将 底层 标记 返回 到 原始 状态 


disable 











value 获取 滑动 柄 的 值 





表 19-10 滑动 条 工具 集 的 常用 事件 




















事件 名 说 明 

chang 在 滑动 柄 停止 移动 并 且 它 的 值 发 生 改 变 时 触发 
slide | 在 滑动 栖 移 动 时 触发 

start | 在 滑动 栖 开 始 移动 时 触发 

sited | 在 滑动 栖 停 止 移动 时 触发 
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19.3.2 实现 图 片 滑 块 滚动 条 效果 


本 节 通 过 应 用 jQuery UI 插件 中 的 滑动 条 (Slider) 工具 集 实现 图 片 滑 块 滚动 条 效果 ， 具 
体内 容 见 【范例 19-3】。 该 案例 的 初始 效果 如 图 19-8 所 示 。 通 过 鼠标 或 者 方向 键 向 右 移动 滑 
动 柄 ， 图 片 也 会 随 着 移动 ， 具 体 效 果 如 图 19-9 所 示 。 


， 图 片 滑 块 济 动 条 -和 oxilla Fircfox 


图 片 滑 块 北 动 条 国 
”fle /Ic Domnents wd settine/ @ 


园 访问 最 多 癌 名言 新 于 上 路 中] jqaeryol bl 





) 图 片 澡 块 液 动 条 

文件 时 ) 岗 轿 E) 查看 C) 历史 GG) 书签 @) 工具 0D) 

国 ED 辆 | 
fle /fc: /Dormnts md Settingx/i 加 


园 访问 最 多 门 留言 新手 上 跨 人 jqueryot. bl 


8 9 10 





19-9 拖 动 滑动 条 效果 
在 具体 实现 时 ， 要 设计 一 个 包含 滑动 条 和 图 片 的 页 面 ， 其 HTML 代码 如 下 : 


<body> 
<div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> 
<div class="scroll-content"> <!-- 图 片 内 容 --> 
<div class="scroll-content-item ui-widget-header">1</div> 
<div class="scroll-content-item ui-widget-header">2</div> 
</div> 
<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> 
<!-- 滚 动 条 对 象 --> 
<div class="scroll-bar"></div> 
</div> 
</div> 
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</body> 
为 了 便于 实现 图 片 滑 块 滚动 条 功能 ， 需 要 引入 jQuetry UI 插件 里 的 如 下 js 文件 : 
<script type="text/javascript" src="jquery-ui.js"></script> 

下 面 编写 jQuery 代码 ， 实 现 图 片 滑 块 滚动 条 功能 ， 有 具体 代码 如 下 。 

【范例 19-3 实现 图 片 滑 块 滚动 条 功能 】 


COGDp 


己 
口 


wwwNRDRDRDRNDRRDRRDRPREPRPRP RPR PP 
RhPheoeoomwnamnmwmewbheoomwnamwm 必 wh 


Ww 
On 心 





// 获 取 图 片 内 容 对 象 及 包含 图 片 内 容 和 滑动 条 对 象 的 div 对 象 
va scrollPane = $( ".scroll-pane" )， 
scrollContent = $( ".scroll-content" ); 


// 获 取 滑 动 条 对 象 并 进行 相应 的 设置 
Var scrollbar = $( ".scroll-bar" ) .slider({ 
// 设 置 发 生 滑动 柄 事件 时 的 触发 事件 


slide: function( event，ui ) {// 设 置 当 用 户 滑动 手柄 时 触发 事件 的 处 理 方法 
if ( scrollContent.width() > scrollPane.width() ) { 
scrollContent.css( "margin-left", Math.round( 
ui.value / 100 * ( scrollPane.width()- 
scrollContent .width() ) 
0 
} else { 
scrollContent.css( "margin-left", 0 ); 


yy 
// 改 变 图 片 的 处 理 
var handleHelper = scrollbar.find( ".ui-slider-handle" ) 
.mousedown (function() { 
scrollbar.width( handleHelper.width() ); 
朱 
.mouseup (function() { 
scrollbar.width( "100%" ) 
}) 
.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" ) 
.wrap( "<div class='ui-handle-helper-parent'></div>" ) .parent (); 
/7 设置 超出 的 图 片 处 于 隐藏 状态 
scrollPane.css( "overflow", "hidden" ); 
// 设 置 滚 动 条 滚动 距离 的 大 小 和 处 理 的 比例 
function sizeScrollbar() { 
Var remainder = scrollContent.width() - scrollPane.width(); 
Var proportion = remainder / scrollContent.width(); 
var handleSize = scrollPane.width() - ( proportion * scrollPane. 
width() ); 
scrollbar.find( ".ui-slider-handle" ).css({ 
width: handleSize, 
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"margin-left": -handleSize / 2 
只 这 
handleHelper.width( "" ).width( scrollbar.width() - handleSize ); 
} 
// 获 取 滚 动 内 容 图 片 位 置 而 设置 滑动 柄 的 值 
function resetValue() { 
Var remainder = scrollPane.width() - scrollContent.width(); 
Var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 : 
ParseInt( scrollContent.css( "margin-left" ) ); 
var Percentage = Math.round( leftVal / remainder * 100 ); 
scrollbar.slider( "value", percentage ); 
} 
// 根 据 窗口 大 小 设置 显示 图 片 内 容 
function reflowContent() { 
var showing = scrollContent.width() + ParseInt( scrollContent. 
css( "margin-left" ), 10 ); 
var gap = scrollPane.width() - showing; 
if (gap>0)1{ 
scrollContent.css( "margin-left", parseInt( scrollContent 
css( "margin-left" ), 10 ) + gap ); 
} 
} 
// 根 据 窗口 大 小 调整 滑动 柄 的 位 置 
$( window ) .resize(function() { 
resetValue () 7 
sizeScrollbar() 
reflowContent (); 
Hn 
setTimeout ( sizeScrollbar，10 ); //0.1 秒 后 执行 方法 sizeScrollbar 
以 
在 上 述 代 码 中 : 
e 第 2~3 行 代码 实现 获取 图 片 内 容 对 象 和 包含 所 有 内 容 的 div 对 象 。 
日 第 5~16 行 代码 获取 滑动 条 对 象 ， 然 后 通过 slider() 方 法 设置 滑动 条 的 各 种 选项 ， 其 中 
选项 slide 设置 当 用 户 滑动 手柄 时 触发 事件 的 处 理 方法 。 
。 第 18~26 行 代 码 实现 改变 图 片 的 处 理 ， 第 28 行 主要 用 来 实现 设置 超出 的 图 片 处 于 隐 
日 第 30~39 行 代码 主要 用 来 设置 滚动 条 滚动 距离 的 大 小 和 处 理 的 比例 。 
日 第 41~47 行 代码 用 来 获取 滚动 内 容 图 片 位 置 且 设置 滑动 柄 的 值 。 
® 第 49~56 行 代码 实现 根据 窗口 大 小 设置 显示 图 片 内 容 。 
日 第 57~61 行 代码 实现 根据 窗口 大 小 调整 滑动 柄 的 位 置 。 
e 第 62 行 代码 实现 0.1 秒 后 执行 方法 sizeScrollbar。 


19.3.3 实现 简单 颜色 调 色 器 


本 节 通 过 应 用 jQuery UI 插件 中 的 滑动 条 (Slider) 工具 集 实现 简单 颜色 调 色 器 ， 具 体内 
容 见 【范例 19-4】。 该 案例 的 初始 效果 如 图 19-10 所 示 。 通 过 鼠标 或 者 方向 键 向 右 移动 各 色 
系 的 滑动 柄 ， 颜 色 块 就 会 显示 所 设置 的 颜色 ， 有 具体 效果 如 图 19-11 所 示 。 

) 疾 色 调 色 吉 - Horilla Pirefox 

文件 中。 编 训 四 ”查看 WW 历史) 书签 四 “工具 四 帮助 四 

| 口 丽 色 凋 色 时 | 十 | 

€ Oil O cj|| 园 - 55P| Bil- 会 的 
Wg 下 gE MEL © jawryol hte 


€ ein O 


WR 门 BE WF jtaeryol. hal 





19-11 设置 颜色 后 的 效果 
在 具体 实现 时 ， 要 设计 一 个 包含 色 系 滑动 条 和 颜色 块 的 页 面 ， 其 HTML 代码 如 下 : 


3 <body class="ui-widget-content" style="border:0;"> 
2 <p class="ui-state-default ui-corner-all ui-helper-clearfix" 
style="padding:4px;"> 
3 <span class="ui-icon ui-icon-pencil" style="float:left; margin:- 
2px Spx 0 0;"></span> 
// 颜 色调 色 器 


4 
Ss </p> 

6. <!-- 红 、 绿 、 蓝 三 种 色 系 滑动 条 --> 
学 <div id="red"></div> 

8 <div id="green"></div> 

9 <div id="blue"></div> 


i S <!-- 颜 色 块 --> 
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<div id="swatch" class="ui-widget-content ui-corner-all"></div> 
2 </body> 


下 面 编写 jQuery 代码 ， 实 现 简 单 颜色 调 色 器 功能 ， 具 体 代码 如 下 : 


【范例 19-4 实现 简单 的 颜色 调 色 器 功能 】 
TL // 设 置 关 于 颜色 的 十 六 进 制 

be function hexFromRGB(r, g, b) { 

3 Var hex = [ 

4. rtoString( 16 ); 

证 gtostring(C 16 )s 

6 b.toString( 16 ) 

人 2 

8 $.each( hex, function( nr, val ) { 
9 Ls 





if ( val.length = 


Ei hex[ nr ] = "0" + val; 
ee } 
12. ]) 7 
13。 return hex.join( "" ) .toUPPerCase() 
14. } 
15 // 设 置 颜色 块 的 颜色 
E65 function refreshSwatch() { 
i // 获 取 三 大 色 系 的 滑动 条 对 象 
BR var red = $( "#red" ) .sliderz( "value" )， 
19. green = $( "#green" ) .slider( "value" )， 
20- blue = $( "#blue" ).slider( "value" )， 
Ds hex = hexFromRGB( red，green，blue ); // 获 取 三 大 色 系 的 十 六 进 制 值 
22% $( "#swatch" ).css( "background-color", "#" + hex ); 
// 设 置 颜色 块 的 背景 颜色 
235 } 
24. $ (function() { 
2 $( "#red, #green, #blue" ).slider({ 
26. orientation: "horizontal"， // 设 置 色 系 滚动 条 竖 向 排列 
2 range: "min", 
28. max: 255， // 设 置 色 系 滚动 条 的 最 大 值 
29. value: 127，// 设 置 色 系 滚动 条 的 默认 值 
30. slide: refreshSwatch，// 设 置 发 生 拖 动手 柄 事件 的 处 理 方法 
3 change: refreshSwatch // 重 新 设置 value 后 的 处 理 方法 
32% EA 
337 // 设 置 各 色 系 的 默认 值 
34. $( "#red" ).slider( "value"，255 ); 
35s $( "#green" ).slider( "value", 140 ); 
36. $( "#blue" ).slider( "value", 60 ); 
S37 }) 
在 上 述 代码 中 : 
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@ 第 2~23 行 代码 为 自 定 义 的 两 个 方法 hexFromRGB0O 和 refreshSwatch()， 第 一 个 方法 主 
要 用 来 实现 把 各 个 色 系 的 值 转换 成 表示 颜色 的 十 六 进 值 ， 而 第 二 个 方法 用 于 设置 颜色 
块 的 颜色 。 

@ 第 24-37 行 设置 页 面 加 载 时 的 执行 过 程 ， 其 中 第 25~32 行 通过 slider() 方 法 设置 各 色 系 
的 各 种 选项 ， orientation 设置 各 个 颜色 系 滑动 块 的 排列 方向 ，range 设置 各 个 颜色 系 
滑动 块 之 间 是 否 需要 相互 感应 ，min 表示 感应 最 小 值 ，max 设置 各 个 颜色 系 滑动 块 的 
最 大 值 ，slide 设置 各 个 颜色 系 滑动 块 发生 拖 动手 柄 事件 的 处 理 方法 ，change 设置 各 个 
磊 色 系 滑 动 块 重新 设置 value 后 的 处 理 方法 ， 最 后 通过 slider() 方 法 设置 各 个 颜色 系 滑 
动 块 的 值 。 


19.4 相关 参考 


e jQuery UI 插件 一 一 http://jqueryui.com/。 
e jQuery UI 插件 API 一 一 http://api.jqueryui.com/。 
e jQuery 中 文 网 一 一 http://www.jquerycn.cn/。 
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第 20 童 用 工具 集 实现 酷 炫 的 页 面 


十 全 十 美 虽 无 法 达到 ， 但 却 值得 追求 。 
一 一 罗 。 布 坎 南 


本 章 在 上 一 章 的 基础 上 ， 通 过 jQuery UI 插件 中 的 工具 集 继续 进一步 丰富 和 美化 页 面 ， 
主要 涉及 的 内 容 有 通过 折合 面板 实现 手风琴 效果 、 通 过 对 话 框 工具 集 实 现 各 种 漂亮 的 对 话 
框 、 通 过 日 期 选择 器 来 处 理 页 面 中 的 日 期 以 及 通过 选项 卡 实现 幻灯 和 分 页 效果 。 

本 章 主 要 知识 点 : 

折 有 司 面 板 工具 集 
对 话 框 工具 集 
日 期 选择 器 工具 集 
选项 卡 工具 集 


20.1 实现 “手风琴 ”效果 


jQuery UI 插件 中 的 折 且 面板 (Accordion) 工具 集 可 以 很 容易 地 实现 “手风琴 ”效果 。 
所 谓 “ 手 风琴 ”效果 ， 就 是 单 击 面 板 的 标题 栏 时 ， 就 会 展开 相应 的 内 容 ， 当 再 次 单 击 面板 的 
标题 栏 时 ， 已 展开 的 内 容 就 会 自动 关闭 ， 也 就 是 页 面 中 经 常 遇 到 的 一 种 折 登 效果 。 


20.1.1 jQuery UI 所 支持 的 折 又 面板 工具 集 


jQuery UI 插件 的 折合 面板 工具 集 是 一 种 由 一 系列 内 容 容 器 所 组 成 的 工具 集 ， 这 些 容 咒 在 
同一 时 刻 只 能 有 一 个 被 打开 。 每 个 容器 都 有 一 个 与 之 关联 的 标题 元 素 ， 用 来 打开 该 容器 并 显 
示 内 容 。 该 工具 集 不 仅 对 于 页 面 访 问 者 来 说 易于 使 用 ， 而 且 对 于 开发 者 来 说 也 易于 实现 。 

在 页 面 中 使 用 jQuery UI 插件 的 折合 面板 工具 集 ， 需 要 经 过 如 下 步骤 : 


人 ED) 在 页 面 代码 的 head 标签 元 素 中 添加 折 营 面板 工具 集 所 支持 的 类 库 、 样 式 表 等 资 
源 ， 具 体内 容 如 下 : 


<script src="jquery-3.2.1.js"></script> 
<script src="ui/jquery-ui. js"></script> 
<link href="jquery-ui.css" rel="stylesheet"> 


B02 通过 方法 accordion() 封 装 DOM 对 象 为 折 梧 面板 工具 集 对 象 ， 该 方法 的 具体 语法 如 
下 : 
$ (selector) .accordion(); 
其 中 ，selector 是 选择 器 ， 用 于 选择 将 被 封装 成 折 登 面板 工具 集 对 象 的 容器 。 


人 3 根据 具体 需求 ， 通 过 方法 accordion(options) 设 置 折 登 面 板 工具 集 对 象 的 配置 选项 ， 
以 达到 预期 的 效果 。 折 登 面 板 工具 集 的 配置 选项 内 容 如 表 20-1 所 示 。 


表 20-1 折叠 面板 的 常见 配置 选项 











名 称 说 明 

active 设置 初始 时 打开 的 折 倒 面板 内 容 
animate 设置 打开 折 芝 面板 内 容 时 的 动画 
disabled 设置 是 否 禁 用 折 县 面板 对 象 

event 标题 事件 ， 触 发 打开 折合 面 板 内 容 
header 选择 折 县 面板 的 标题 

icon 设置 小 图 片 

autoHeight 内 容 高 度 是 否 设置 为 自动 增高 
fillSpace 设置 内 容 是 否 充满 父 元 素 的 高 度 





如 果 想 在 页 面 中 灵活 地 使 用 折 登 面板 工具 集 ， 除 要 了 解 该 工具 集 的 使 用 步 又、 配置 选项 
之 外 ， 还 需要 了 解 它 的 方法 和 事件 。 该 工具 集 常用 方法 具体 内 容 如 表 20-2 所 示 ; change 事件 
表示 在 折 半 面板 改变 的 时 候 触 发 。 


表 20-2 折 和 又 面板 的 常用 方法 











说 明 
destroy 返回 页 面 DOM 元素 封装 成 折叠 面板 前 的 状态 
disable 禁用 折 倒 面板 
enable 启用 折 炙 面板 
获取 或 设置 折 释 面板 选项 
widget 获取 页 面 中 的 折 共 面板 对 象 
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20.1.2 实现 经 典 的 导航 菜单 


在 项 目的 页 面 中 ， 总 少不了 导航 菜单 。 众 多 的 导航 菜单 样式 中 ， 最 流行 、 最 漂亮 的 莫 过 
于 手风琴 样式 导航 菜单 。 本 节 通 过 应 用 jQuery UI 插件 中 的 折 肝 面板 “Accordion) 工具 集 来 
实现 导航 菜单 功能 ， 具 体内 容 见 【范例 20-1】。 

该 案例 的 初始 效果 如 图 20-1 所 示 。 在 导航 菜单 里 ， 当 鼠标 移动 到 “菜单 二 ”上 时 ， 就 会 
出 现 该 菜单 的 菜单 选项 ， 效 果 如 图 20-2 所 示 。 
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图 20-1 加 载 页 面 图 20-2 显示 菜单 二 子 菜单 
在 具体 实现 时 ， 要 设计 一 个 包含 导航 菜单 和 内 容 区 域 的 页 面 ， 其 HTML 代码 如 下 : 


Ws <body> 

六 <div id="container"> 

3. <div id="navCol"> <!-- 设 计 导 航 菜单 --> 

4. <ul id="navRccordion"> 

5。 <1li> <a class="heading" href="#me" title=" 菜 单一 "> 菜单 一 </a> 

6 <div> <a href="bio.html#me" title=" 菜 单 1 1"> 菜 单 1 1</a> <a href= 

"contact .html#me" title=" 菜 单 

+ 天 1 2"> 菜 单 1 2</a> <a href="contact.html#me" title=" 菜 单 1 3"> 菜 单 1 3</a> 
<a href="resume.html#me" 

8. title="Resume"></a> </div> 

9 ER 

LO OA 

1 </ul> 

25 </div> 

Ta <div id="contentCol"> <!-- 设 置 内 容 区 域 --> 

14. <h1> 

35 <center> 

16. 手风琴 样式 导航 菜单 

7 </center> 

18. </h1> 

9 


0 </div> 

2 <div id="clear"></div> 
之 2 </div> 

2 </body> 


在 上 述 代码 中 ， 第 2~12 行 用 来 设计 导航 菜单 ， 第 13~20 行 用 来 实现 内 容 区 域 。 
为 了 便于 实现 导航 菜单 功能 ， 需 要 引入 jQuetry UI 插 件 里 的 如 下 js 文件 : 





<script type="text/javascript" src="jquery-3.2.1.js"></script> 
<script type="text/javascript" src="jquery-ui.js"></script> 
<link href="jquery-ui.css" rel="stylesheet"> 
上 述 导入 的 js 文件 中 ，jquery-uijs 为 jQuery UI 的 核心 库 ，jquery-ui.css 为 jQuery UI 的 核 
心 样式 库 。 
下 面 编写 jQuery 代码 ， 实 现 导航 菜单 功能 ， 具 体 代码 如 下 : 
【范例 20-1 实现 导航 菜单 功能 】 


Ls $ (function() { 

2. // 实 现 折 营 效果 

3e $("#navAccordion") .accordion({ 

4. header: ".heading", // 设 置 样式 类 

5 event: "mouseover", // 设 置 触发 事件 

6. autoHeight: true, // 预 防 不 必 要 的 空白 

7 alwaysOpen: false, // 设 置 标题 内 容 是 否 可 以 被 关闭 
8 active:false, 

9。 由 

10. 和 


在 上 述 代码 中 ， 主 要 通过 accordion() 方 法 实现 导航 菜单 。 其 中 属性 header 用 来 实现 设置 
样式 类 ;属性 event 用 来 实现 设置 触发 的 事件 ， 设 置 为 鼠标 移动 事件 ， 属 性 autoHeight 的 值 
为 true， 用 来 防止 在 一 个 内 容 片 段 里 的 内 容 大 于 其 他 内 容 片段 时 ， 菜 单 中 出 现 不 必要 的 空 
白 。 属 性 alwaysOpen 的 值 为 flase， 用 来 设置 所 有 标题 内 容 都 可 以 被 关闭 。 


20.2 设计 页 面 中 各 种 对 话 框 效果 
如 果 要 在 项 目的 网 页 中 显示 简短 信息 或 向 访问 者 发 间 ， 通 常会 通过 两 种 方式 来 实现 ， 
种 是 对 话 框 ， 另 一 种 是 打开 新 的 预先 定义 好 尺寸 、 设 置 为 类 对 话 框 风格 的 页 面 。 虽 然 可 以 通 


过 JavaScript 原生 对 话 框 〈 例 如 alert 和 comfirm 等 ) 来 实现 ， 但 是 这 种 方式 既 不 灵活 也 不 巧 
妙 。 值 得 庆幸 的 是 ，jQuery UI 插件 专门 提供 了 关于 对 话 框 的 组 件 。 
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20.2.1 jQuery UI 所 支持 的 对 话 框 工具 集 


jQuery UI 插件 的 对 话 框 工具 集 不 仅 可 以 显示 信息 、 附 加 内 容 (图 片 或 多 媒体 ) ， 甚 至 还 
包含 交互 性 内 容 (表单 ) ， 同 时 为 该 组 件 增加 按钮 也 非常 容易 ， 并 且 还 可 以 随意 地 在 页 面 内 
拖 动 和 调整 大 小 。 

在 页 面 中 使 用 jQuery UI 插件 的 对 话 框 工具 集 ， 需 要 经 过 如 下 步 又 。 

CDI01 在 页 面 代码 的 head 标签 元 素 中 添加 对 话 框 工具 集 所 支持 的 类 库 、 样 式 表 等 资源 ， 
具体 内 容 如 下 : 

<script type="text/javascript" src="jquery-3.2.1.js"></script> 

<script type="text/javascript" src="jquery-ui.js"></script> 

<link href="jquery-ui.css" rel="stylesheet"> 
B02 通过 dialog() 方 法 封装 DOM 对 象 为 jQuery 对 象 ， 该 方法 的 具体 语法 如 下 : 

$ (selector) .dialog(); 


其 中 ，selector 是 选择 器 ， 用 于 选择 将 被 封装 成 jQuery 对 象 的 容器 。 


人 3 根据 具体 需求 ， 通 过 dialog(options) 方 法 设置 对 话 框 对 象 的 配置 选项 ， 以 达到 预期 
的 效果 。 对 话 框 的 配置 选项 内 容 如 表 20-3 所 示 。 


表 20-3 对 话 框 工具 集 的 常见 配置 选项 


说 明 






































autoOpen boolean 如 果 设 置 为 true， 则 默认 页 面 加 载 完 毕 后 ， 就 自动 弹出 对 话 框 ， 相 反 
则 处 于 hidden 状态 

buttons object 为 对 话 框 添加 相应 的 按钮 及 处 理 函 数 

closeOnEscape “| boolean 设置 当 对 话 框 打 开 的 时 候 ， 用 户 按 Esc 键 是 否 关闭 对 话 框 

dialogClass string 设置 指定 的 类 名 称 ， 它 将 显示 于 对 话 框 的 标题 处 

draggable boolean 设置 对 话 框 是 否 可 以 拖 动 

height number 设置 对 话 框 的 高 度 〈 单 位 ; 像素 ) 

hide string 使 对 话 框 关闭 隐藏 〉》， 可 添加 动画 效果 

maxHeight number 设置 对 话 框 的 最 大 高 度 (单位 像素) 

maxWidth number 设置 对 话 框 的 最 大 宽度 (单位 :像素 ) 

minHeight number 设置 对 话 框 的 最 小 高 度 〈 单 位 : 像素 ) 

minWidth number 设置 对 话 框 的 最 小 宽度 (单位 像素) 

modal boolean 是 否 为 模式 窗口 。 如 果 设 置 为 mue， 则 在 页 面 所 有 元 素 之 前 有 个 屏蔽 层 

position string,arra' 设置 对 话 框 的 初始 显示 位 置 

Resizable boolean 设置 对 话 框 是 否 可 以 调整 大 小 

show string 用 于 显示 对 话 框 

title string 指定 对 话 框 的 标题 ， 也 可 以 在 对 话 框 附加 元 素 的 title 属性 中 设置 标题 

width number 设置 对 话 框 的 宽度 〈 单 位 : 像素 ) 
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如 果 想 在 页 面 中 灵活 地 使 用 对 话 框 工 具 集 ， 除 要 了 解 该 工具 集 的 使 用 步骤 、 配 置 选项 之 
外 ， 还 需要 了 解 它 的 方法 和 事件 ， 请 见 表 20-4 和 表 20-5。 


表 20-4 对 话 框 工 具 集 的 常用 方法 



































名 称 说 明 
close 关闭 对 话 框 对 象 
destroy 销毁 对 话 框 对 象 
isOpen 用 于 判断 对 话 框 是 否 处 于 打开 状态 
moveToTop 将 对 话 框 移 至 最 项 层 显示 
n 打开 对 话 框 

option 获取 或 设置 对 话 框 的 属性 
widget 返回 对 话 框 对 象 

表 20-5 对 话 框 工具 集 的 常用 事件 
名 称 说 明 
beforeClose 当 对 话 框 关 闭 之 前 ， 触 发 此 事件 。 如 果 返 回 false， 则 对 话 框 仍然 显示 
close 当 对 话 框 关 闭 时 ， 触 发 此 事件 。 如 果 返 回 false， 则 对 话 框 仍然 显示 
create 当 创 建 对 话 框 时 ， 触 发 此 事件 
drag 当 拖 电 对 话 框 移动 时 ， 触 发 此 事件 
dragStart 当 开始 拖 电 对 话 框 移动 时 ， 触 发 此 事件 
dragStop 当 拖 上 忠 对 话 框 动作 结束 时 ， 触 发 此 事件 
focus, 当 拖 遇 对 话 框 获取 焦点 时 ， 触 发 此 事件 
open 当 对 话 框 打开 后 ， 触 发 此 事件 
resize 当 对 话 框 大 小 改变 时 ， 触 发 此 事件 
resizeStart 当 开 始 改变 对 话 框 大 小 时 ， 触 发 此 事件 
resizeStop 当 对 话 框 大 小 改变 结束 时 ， 触 发 此 事件 
beforeClose 当 对 话 框 关闭 前 ， 触 发 此 事件 





20.2.2 实现 弹出 和 确认 信息 对 话 框 效 果 


在 项 目的 页 面 中 ， 经 常 要 与 用 户 进 行 交互 。 在 提交 页 面 表单 时 ， 如 果 用 户 名 (文本 框 》 
为 空 ， 则 通过 提示 框 提 示 用 户 输入 内 容 ， 如 果 要 删除 记录 ， 同 样 也 需要 确认 是 否 删除 。 如 果 直 
接 通 过 JavaScript 语 言 中 的 alert0 方 法 和 confirm() 方 法 来 实现 ， 不 仅 达 不 到 预期 效果 ， 代 码 还 比 
较 复 杂 。 本 节 将 通过 jQuery UI 插件 的 对 话 框 工具 集 来 实现 ， 具 体内 容 见 【范例 20-2】。 

该 案例 的 初始 效果 如 图 20-3 所 示 。 如 果 用 户 没有 在 输入 框 中 输入 任何 信息 ， 就 直接 单 击 
“提交 ”按钮 ， 则 会 弹出 提示 信息 对 话 框 ， 如 图 20-4 所 示 。 如 果 要 删除 用 户 信息 cjgong， 单 
击 “ 删 除 ” 按 钮 则 会 先 弹 出 确认 对 话 框 ， 效 果 如 图 20-5 所 示 。 
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图 20-5 删除 确认 信息 对 话 框 
在 具体 实现 时 ， 要 设计 一 个 包含 用 户 输入 框 和 删除 按钮 的 页 面 ， 其 HTML 代码 如 下 : 


1, <body> 

2 <div class="demo-description"> 

3 <!-- 文 本 输入 框 --> 

4. <div style="background-color:#eee;padding:5px;width:260px"> 

5 请 输入 用 户 : <br /> 

6. <input id="txtName" type="text" class="txt" /> 

Te <input id="btnSubmit" type="button" value=" 提 交 " class="btn" /> 
及 </div> 

oR <!-- 确 认 删除 --> 

0s <div style="padding:S5px;width:260px"> 

I <span id="spnName">cjgong</span> 

2 <input id="btnDelete" type="button" value=" 删 除 " class="btn" /> 
13, </div> 

14. <div id='dialog-modal'></div> 


15, </div> 
16, </body> 


下 面 编写 jQuery 代码 ， 实 现 弹出 和 确定 信息 对 话 框 功能 ， 具 体 代 码 如 下 。 
【范例 20-2 实现 弹出 和 确认 信息 对 话 框 功能 】 


$ (function() { 
网 $("#btnSubmit") .on ("click", function() { // 检 测 按钮 事件 
3. if ($("#txtName").val() == "") { // 如 果 文 本 框 为 空 
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sys_Alert ("姓名 不 能 为 空 ! 请 输入 姓名 ") ; 


» 
a 
$("#btnDelete") .on ("click", function() { // 询 问 按钮 事件 
if ($("#spnName") .html() !=nul1) { // 如 果 对 象 不 为 空 
sys Confirm(" 您 真 的 要 删除 该 条 记录 吗 ? ") ; 
return false; 
]}) 
En 
function sys Alert(content) { // 弹 出 提示 信息 对 话 框 


$("#dialog-modal") .dialog ({ 
height: 140, 
modal: true, 
title: ' 系 统 提示 '， 
hide: 'slide', 
buttons: { 
Cancel: function() { 
$ (this) .dialog ("close"); 
} 
}, 
open: function(event, ui) { 
$ (this) .html("")7 
$ (this) .append("<p>" + content + "</p>"); 


1); 
function sys Confirm(content) { // 弹 出 确认 信息 窗口 
$("#dialog-modal") .dialog ({ 
height: 140, 
modal: true, 
title: ' 系 统 提示 '， 
hide: 'slide', 
buttons: { 
' 确 定 ': function() { 
$("#spnName") .remove (); 
$ (this) .dialog ("close"); 
}, 
' 取 消 ': function() { 
$ (this) .dialog ("close"); 
| 
jx 
open: function (event，ui) { 
$(this) .html(n")7 
$ (this) .append ("<p>" + content + "</p>"); 


Ds; 
1 


在 上 述 代码 中 : 
e@ 第 2~6 行 代码 为 提交 按钮 绑 定 单 击 事件 ， 其 中 第 3~5 行 代码 获取 id 值 为 txtName 的 元 


素 对 象 ， 然 后 判断 该 对 象 的 内 容 是 否 为 空 ， 如 果 为 空 则 调用 自 定义 方法 sys_Alert()。 
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@ 第 7~12 行 代码 为 删除 按钮 绑 定 单 击 事件 ， 其 中 第 8~11 行 代码 获取 id 值 为 spnName 
的 元 素 对 象 ,然后 判断 该 对 象 的 内 容 是 否 为 空 ， 如 果 不 为 空 则 调用 自 定 义 方法 
SyS_Confirm()。 

日 在 自 定义 方法 sys_Alert() 中 ， 通 过 dialog() 方 法 实现 弹出 提示 信息 对 话 框 ， 而 在 自 定义 
方法 sys_Confirm() 中 ， 通 过 dialog() 方 法 实现 弹出 确认 信息 对 话 框 。 


20.3 处 理 页 面 中 的 日 期 


在 项 目 开 发 的 页 面 中 ， 处 理 日 期 类 型 的 输入 是 一 个 非常 让 人 头疼 的 问题 。 因 为 用 户 使 用 
者 会 根据 个 人 习惯 ， 输 入 各 种 各 样 的 样式 。 为 了 便于 用 户 使 用 ， 程 序 开发 人 员 需 要 设计 各 种 
样式 的 日 期 选择 器 。 为 了 解决 上 述 问题 ，jQuery UI 提供 了 高 度 可 配置 且 非 常 易于 实现 和 定制 
的 日 期 选择 器 工具 集 。 


20.3.1 jQuery UI 所 支持 的 日 期 选择 器 工具 集 

jQuery UI 插 件 的 日 期 选择 器 不 仅 可 以 自 定义 日 期 格式 和 语言 、 限 制 可 选 日 期 的 范围 ， 还 
可 以 轻松 地 添加 按钮 和 其 他 导航 选项 。 无 论 表单 中 哪个 控件 需要 输入 日 期 ， 都 可 以 为 之 添加 
-个 日 期 选择 器 。 同 时 该 控件 还 支持 键盘 操作 ， 当 按 下 Ctrl 键 时 ， 使 用 键盘 上 的 箭头 就 能 选 
择 一 个 日 期 单元 格 ， 然 后 按 回 车 键 就 可 以 选中 该 日 期 。 

在 页 面 中 使 用 jQuery UI 插件 的 日 期 选择 器 ， 需 要 经 过 如 下 步骤 。 
人 ON) 在 页 面 代码 的 head 标签 元 素 中 添加 日 期 选择 所 支持 的 类 库 、 样 式 表 等 资源 ， 有 具体 

内 容 如 下 : 


<script src="jquery-3.2.1.js"></script> 
<script src="jquery-ui.js"></script> 
<link href="jquery-ui.css" rel="stylesheet"> 


起 F022 通过 datepicker() 方 法 封装 DOM 对 象 为 jQuery 对 象 ， 该 方法 的 具体 语法 如 下 : 
$ (selector) .datepicker (); 
其 中 ，selector 是 选择 器 ， 用 于 选择 将 被 封装 成 日 期 选择 器 工具 集 的 对 象 。 


人 3 根据 具体 需求 ， 通 过 datepicker(options) 方 法 设置 日 期 选择 器 对 象 的 配置 选项 ， 以 达 
到 预期 的 效果 。 日 期 选择 器 工具 集 的 配置 选项 内 容 如 表 20-6 所 示 。 


表 20-6 日 期 选择 器 工具 集 常见 配置 选项 

















名 称 属性 值 说 明 
a | 将 选择 的 日 期 同步 到 另 一 个 域 中 ， 配 合 altFormat 可 以 显示 不 同 
i a 格式 的 日 期 字符 中 
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( 续 表 ) 


























名 称 属性 值 说 明 
altFormat 本 在 设置 了 altField 的 情况 下 ， 显 示 在 另 一 个 域 中 的 日 期 格式 
appendText g 在 日 期 插件 的 所 属 域 后 面 添加 指定 的 字符 串 
i 设置 弹出 按钮 的 图 片 ， 如 果 非 空 ， 则 按钮 的 文本 将 成 为 alt 属 
性 ， 不 直接 显示 
buttonText 设置 触发 按钮 的 文本 内 容 
calculate Week 设置 允许 通过 下 拉 框 列表 选取 星期 
changeMonth boolean 设置 允许 通过 下 拉 框 列表 选取 月 份 
changeYear boolean 设置 允许 通过 下 拉 框 列表 选取 年 
constrainInput boolean 如 果 设 置 为 rue， 则 约束 当前 输入 的 日 期 格式 
设置 当前 按钮 的 文本 内 容 ， 此 按钮 需要 通过 showButtonPane 
currentText string (参数 ) 的 设置 才 显 示 
dateFormat 设置 日 期 字符 串 的 显示 格式 
设置 一 星期 中 每 天 的 名 称 ， 从 星期 天 开始 。 此 内 容 用 于 
dayNames 


dateFormat 时 显示 ， 以 及 日 历 中 当 鼠 标 移 至 行头 时 显示 

设置 一 星期 中 每 天 的 缩 语 ， 从 星期 天 开始 ， 此 内 容 用 于 
dateFormat 时 显示 ， 以 及 日 历 中 的 行头 显示 

设置 一 星期 中 每 天 的 缩 语 ， 从 星期 天 开始 ， 此 内 容 用 于 
dateFormat 时 显示 ， 以 及 日 历 中 的 行头 显示 

Date，number，| 设置 默认 加 载 完 后 第 一 次 显示 时 选中 的 日 期 


dayNamesMin 


dayNamesShort 





defaultDate 


0 [id 
名 
5 




















string 
duration Date, number 设置 日 期 控件 展开 动画 的 显示 时 间 
firstDa 设置 一 周 中 的 第 一 天 。 星 期 天 为 0， 星期 一 为 1， 以 此 类 推 
如 果 设 置 为 tue， 则 单 击 当天 按钮 时 ， 将 移 至 当前 已 选中 的 日 
gotoCurrent boolean 期 ， 而 不 是 今天 
Gt ee 设置 当 没有 上 一 个 或 下 一 个 可 选择 的 情况 下 ， 隐藏 掉 相应 的 按 
钮 (默认 为 不 可 用 ) 
isRTL boolean 如 果 设 置 为 tue， 则 所 有 文字 都 是 从 右 自 左 
Date，number，| 设置 一 个 最 大 的 可 选 日 期 
maxDate 
string 
2 Date，number，| 设置 一 个 最 小 的 可 选 日 期 
minDate 
string 
monthNames array 设置 所 有 月 份 的 名 称 
monthNamesShort arra 设置 所 有 月 份 的 缩写 
navigationAsDateFor 如 果 设 置 为 tue， 则 formatDate 函数 将 应 用 到 prevText、 
mat nextText 和 currentText 的 值 中 显示 ， 例 如 显示 为 月 份 名 称 


nextText string 设置 “下 个 月 ”链接 的 显示 文字 





设置 一 次 要 显示 多 少 个 月 份 。 如 果 为 整数 则 显示 月 份 的 数量 ， 


numberOfMonths Number, array 如 果 是 数组 ， 则 显示 行 与 列 的 数量 











prevText string 设置 “上 个 月 ”链接 的 显示 文字 
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( 续 表 ) 





名 称 


shortYearCutoff 


属性 值 说 明 
设置 截止 年 份 的 值 。 如 果 是 数字 〈0-99) 则 以 当前 年 份 开始 算 
起 ， 如 果 为 字符 串 ， 则 相应 地 转 为 数字 后 再 与 当前 年 份 相 加 。 


当 超 过 截止 年 份 时 ， 则 被 认为 是 20 世纪 


String, number 





showAnim 


设置 显示 、 隐 藏 日 期 插件 的 动画 的 名 称 


string 





showButtonPanel 


boolean 设置 是 否 在 面板 上 显示 相关 的 按钮 





showCurrentAtPos 


设置 当 多 月 份 显示 的 情况 下 ， 当 前 月 份 显示 的 位 置 。 自 顶部 / 左 
边 开 始 第 x 位 


number 

















showMonthAfterYear | boolean 是 否 在 面板 的 头 部 年 份 后 面 显 示 月 份 
showOn string 设置 什么 事件 触发 显示 日 期 插件 的 面板 

如 果 使 用 showAnim 来 显示 动画 效果 ， 可 以 通过 此 参数 来 增加 
showOptions options 一 些 附加 的 参数 设置 
showOtherMonths 是 否 在 当前 面板 显示 上 、 下 两 个 月 的 一 些 日 期 数 〈 不 可 选 ? 
showWeek 是 否 在 当前 面板 显示 上 、 下 两 个 星期 的 一 些 日 期 数 〈 不 可 选 ) 
stepMonths, 当 单 击 上 一 月 或 下 一 月 时 ， 一 次 翻 几 个 月 

控制 年 份 的 下 拉 列 表 中 显示 的 年 份 数量 ， 可 以 是 相对 当前 年 

yearRange 


Cnn:+tnn) ， 也 可 以 是 绝对 值 -nnnn:+tnnnmn) 


如 果 想 在 页 面 中 灵活 地 使 用 日 期 选择 器 工具 集 ， 除 要 了 解 该 工具 集 的 使 用 步骤 和 配置 选 
项 之 外 ， 还 需要 了 解 它 的 方法 和 事件 ， 请 见 表 20-7 和 表 20-8。 


表 20-7 日 期 选择 器 工具 集 常用 方法 



































名 称 说 明 

destro 从 元 素 中 移 除 拖 电 功 能 

dial 在 dialog 插 件 中 打开 一 个 日 期 插件 

etDate 返回 当前 日 期 插件 选择 的 日 期 

hide 隐藏 〈 关 闭 ) 之 前 已 经 打开 的 日 期 面板 

isDisabled 确认 日 期 插件 是 否 已 被 禁用 

option 获取 参数 配置 集合 或 某 个 参数 配置 

setDate 设置 日 期 插件 当前 的 日 期 

show 显示 日 期 插件 

表 20-8 日 期 选择 器 工具 集 常用 事件 

事件 名 说 明 

beforeShow 在 日 期 控件 显示 面板 之 前 ， 触 发 此 事件 ， 并 返回 当前 触发 事件 的 控件 的 实例 对 象 

beforeShowDay 在 日 期 控件 显示 面板 之 前 ， 每 个 面板 上 的 日 期 绑 定时 都 触发 此 事件 ， 参 数 为 触发 
事件 的 日 期 

onChangeMonthYear | 当年 份 或 月 份 改变 时 触发 此 事件 ， 参 数 为 改变 后 的 年 份 、 月 份 和 当前 日 期 插件 的 实例 

onClose 当日 期 面板 关闭 后 触发 此 事件 (无 论 是 否 有 选择 日 期 ) ， 参 数 为 选择 的 日 期 和 当 
前 日 期 插件 的 实例 

onSelect 当 在 日 期 面板 选中 一 个 日 期 后 触发 此 事件 ， 参 数 为 选择 的 日 期 和 当前 日 期 插件 的 实例 
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20.3.2 实现 日 期 输入 框 


在 项 目的 页 面 中 ， 当 单 击 日 期 输入 框 ( 文 本 框 标签 ) 时， 就 会 弹出 日 期 选择 窗口 。 在 该 


窗口 中 可 以 使 用 下 拉 列 表 框 的 方式 选择 年 、 月 ， 同 时 还 会 显示 与 日 期 相对 应 的 星期 。 本 节 通 
过 应 用 jQuery UI 插件 中 的 日 期 选择 器 (Datepicker) 工具 集 ， 实 现 日 期 输入 框 功 能 ， 具 体内 
容 见 【范例 20-3】。 


该 案例 的 初始 效果 如 图 20-6 所 示 。 在 “输入 日 期 ”文本 框 里 单 击 鼠 标 ， 就 会 出 现 日 期 选 


择 器 界面 ， 具 体 效 果 如 图 20-7 所 示 。 


oawm 必 wmwNP 


坦 看 四。 历史 加 书签 田 工具 四 理 助 四 输入 E 期 [| | 
国 Oo S20 oO 


BO cl 图 -Pl 全 -全 9 - Wk su Mo Tu We Th Fr sa 


赔 访 问 最 多 “] 留言 [新手 上 中 全) jquery01.htnl 





图 20-6 加 载 页 面 图 20-7 日 期 选择 器 界面 


在 具体 实现 时 ， 要 设计 一 个 包含 日 期 输入 框 的 页 面 ， 其 HTML 代码 如 下 : 
<body> 
<div class="demo-description"> 

<div> 


输入 日 期 : <input name="txtDate" id="txtDate" class="txt" /> 
<!-- 关 于 输入 日 期 的 文本 框 --> 
</div> 
</div> 
</body> 


下 面 编写 jQuery 代码 ， 实 现 日 期 输入 框 功能 ， 上 有 具体 代 码 如 下 : 
【范例 20-3 实现 日 期 输入 框 功能 】 


$ (function() { 
$ ("#txtDate") .datepicker ({ 


changeMonth: true, // 显 示 下 拉 列 表 月 份 
changeYear: true, // 显 示 下 拉 列 表 年 份 
showWeek: true, // 显 示 日 期 对 应 的 星期 
showButtonPanel: true, // 显 示 * 关 闭 ” 按 钮 面板 
closeText: 'Close' // 设 置 关闭 按钮 的 文本 


9 
中 


在 上 述 代 码 中 : 
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日 第 2 行 代码 获取 记 值 为 txtDate 的 元 素 对 象 。 

@ 第 3~8 行 实现 设置 日 期 选择 器 功能 ， 其 中 属性 changeMonth 用 来 设置 显示 下 拉 列 表 月 
份 ; 属性 changeYear 用 来 设置 显示 下 拉 列 表 年 份 ; 属性 showWeek 用 来 设置 显示 下 拉 
列表 日 期 对 应 的 星期 ; 属性 showButtonPanel 用 来 设置 显示 “关闭 ”按钮 面板 。 


20.3.3 实现 选取 时 间 段 功能 


在 项 目的 页 面 中 ， 经 常 需要 选择 日 期 段 ， 即 先 通 过 “开始 日 期 ”输入 框 选择 开始 日 期 ， 
然后 通过 “结束 日 期 ”输入 框 选 择 结束 日 期 ， 并 且 结束 时 间 必 须 在 大 于 或 等 于 开始 时 间 里 选 
择 。 本 小 节 通过 应 用 jQuery UI 插件 中 的 日 期 选择 器 (datepicker) 组 件 ， 实 现 选取 时 间 段 功 
能 ， 有 具体 内 容 见 【范例 20-4】。 

该 案例 的 初始 效果 如 图 20-8 所 示 。 在 “开始 日 期 ”文本 框 中 ， 选 择 相应 的 日 期 (这 里 为 
2013-12-10) ， 效 果 如 图 20-9 所 示 。 在 “结束 日 期 ”文本 框 中 ， 选 择 相应 的 日 期 ,注意 在 该 
日 期 选择 器 里 只 能 选择 12 月 10 日 以 后 的 日 期 ， 效 果 如 图 20-10 所 示 。 





/5 实现 选取 时 间 段 功能 - Windows Internet Explorer 
GO 加 站 Jo 次 WVBX 文 村 mw 国 |4+]|X| [Ff 
痪 收藏 天 | 部 


生 实现 过 到 时 间 入 功能 偷 " 四 








开始 日 期: | ] 结束 日 期: [ 








ET 


图 20-8 加 载 页 面 














三 实 观 选取 时 间 耻 功 论 - Wndows Internet Bxploror 加 Ej 
SO BD Ve ne il | X |P Rh 
安 收 下 天 | 六 

0 伦 " 回 -品名 ”页面 cl 去 全 G ”IO 生 - 








开始 日 期 : |2013-12-10 诸 束 日 期: | 
和 | + 二 到 zol 加 0 

















图 20-9 选择 开始 日 期 
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oamwm 必 wm 
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开始 日 期 : |2013-12-10 
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20-10 选择 结束 日 期 
在 具体 实现 时 ， 要 设计 一 个 包含 两 个 日 期 输入 框 的 页 面 ， 其 HTML 代码 如 下 : 


<body> 

<!-- 日 期 输入 框 --> 

<div class="demo-description"> 
<div> 


开始 日 期 : <input name="txtStart" id="txtStart" class="txt" /> 
结束 日 期 : <input name="txtEnd" id="txtEnd" class="txt" /> 
</div> 
</div> 


下 面 编写 jQuery 代码 ， 实 现 选 取 时 间 段 功能 ， 具 体 代码 如 下 。 
【范例 20-4 选取 时 间 段 功能 】 


$ (function() { 


$("#txtStart") .datepicker( // 绑 定 开始 日 期 
{ changeMonth: true, // 显 示 下 拉 列 表 月 份 
changeYear: true, // 显 示 下 拉 列 表 年 份 
showWeek: true, // 显 示 日 期 对 应 的 星期 


frotDay: “ln 

onSelect: function(dateText, inst) { 
// 设 置 结束 日 期 的 最 小 日 期 
$('#txtEnd') .datepicker('option', 'minDate', new 
Date (dateText .replace('-', ','))) 


, 
2 
$("#txtEnd") .datepicker ( // 绑 定 结束 日 期 
{ changeMonth: true, // 显 示 下 拉 列 表 月 份 
changeYear: true, // 显 示 下 拉 列 表 年 份 
showWeek: true, // 显 示 日 期 对 应 的 星期 


firstDay: "1", 

onSelect: function(dateText, inst) { 
// 设 置 开始 日 期 的 最 大 日 期 
$('#txtStart') .datepicker('option', 'maxDate', new 
Date (dateText .replace('-', ','))) 


1 
3 
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在 上 述 代码 中 : 


e@ 第 2~11 行 实现 设置 开始 日 期 选择 器 功能 ， 其 中 第 9 行 代码 设置 结束 日 期 的 最 小 日 期 。 
e 第 12~21 行 实现 设置 结束 日 期 选择 器 功能 ， 其 中 第 19 行 代码 设置 开始 日 期 的 最 大 日 期 。 


20.4 实现 幻灯 和 分 页 效果 


通过 jQuery UI 插件 中 的 选项 卡 〈Tab) 工具 集 可 以 很 容易 地 实现 “选项 卡 ” 效 果 。“ 选 
项 卡 ” 效 果 跟 前 面 所 介绍 的 折 县 面板 工具 集 非常 类 似 ， 主 要 用 于 在 一 组 不 同 容器 之 间 切 换 视 
角 。 有 具体 效果 如 图 20-11 所 示 。 

行业 资讯 ”生活 美容 机 械 IT 教育 家 居 汽车 招商 
电话 会 议 系 统 搜索 推广 电子 传真 网 络 维修 电脑 维修 


液晶 墙 视听 柜 投影 布 家 庭 影院 网 络 电话 智能 手机 
笔记 本 电脑 液晶 网 络 传真 机 36 手 机 更 多 >> 


图 20-11 选项 卡 效果 





20.4.1 jQuery UI 所 支持 的 选项 卡 工具 集 


jQuery UI 插件 的 选项 卡 也 是 一 种 由 一 系列 容器 所 组 成 的 工具 集 ， 这 些 容器 在 同一 时 刻 只 
能 有 一 个 被 打开 。 每 个 内 容 容 器 由 标题 和 内 容 构成 ， 当 单 击 内 容 容 器 的 标题 时 ， 就 可 以 访问 
该 容器 包含 的 内 容 ， 每 个 标题 都 作为 独立 的 选项 卡 出 现 。 对 于 每 个 容器 来 说 ， 都 有 与 之 相关 
联 的 选项 卡 。 该 工具 集 不 仅 对 于 页 面 访问 者 来 说 易于 使 用 ， 对 于 开发 者 来 说 也 易于 实现 。 

在 页 面 中 使 用 jQuery UI 插件 的 选项 卡 工具 集 ， 需 要 经 过 如 下 步骤 。 


GI0i 在 页 面 代码 的 head 标签 元 素 中 添加 选项 卡 工具 集 所 支持 的 类 库 、 样 式 表 等 资源 ， 
具体 内 容 如 下 : 
<script src="jquery-3.2.1.js"></script> 
<script src="jquery-ui.js"></script> 
<link href="jquery-ui.css" rel="stylesheet"> 
起 02 通过 tabs() 方 法 封装 DOM 对 象 为 jQuery 对 象 ， 该 方法 的 具体 语法 如 下 : 
$ (selector) .tabs (); 
其 中 ，selector 是 选择 器 ， 用 于 选择 将 被 封装 成 选项 卡 工具 集 对 象 的 容器 。 


D03 根据 具体 需求 ， 通 过 tabs(options) 方 法 设置 选项 卡 工具 集 的 配置 选项 ， 以 达到 预期 
的 效果 。 选 项 卡 工具 集 的 配置 选项 内 容 如 表 20-9 所 示 。 
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表 20-9 选项 卡 工具 集 的 常见 配置 选项 
说 明 
设置 折 闪 面板 的 初始 活动 


意思 是 可 折 释 的 ， 默 认 选项 是 false， 不 可 以 折 琶 。 如 果 设 
置 为 tue， 则 允许 用 户 将 已 经 选中 的 选项 卡 内容 折 车 起 来 


设置 哪些 选项 卡 不 可 用 
切换 选项 卡 的 事件 ， 默 认为 click， 单 击 切换 选项 卡 





| 属性 值 


Selector,element,boolea,number 


名 称 


active 





















collapsible 





disabled arrary 
事件 











event 








如 果 想 在 页 面 中 灵活 地 使 用 选项 卡 工具 集 ， 除 要 了 解 该 工具 集 的 使 用 步骤 和 配置 选项 之 
外 ， 还 需要 了 解 它 的 方法 和 事件 ， 请 见 表 20-10 和 表 20-11。 


表 20-10 选项 卡 工具 集 的 常用 方法 


名 称 说 明 

destroy 完全 删除 折 县 面板 的 特征 
disable 禁用 折 且 面板 

enable 启用 折合 面 板 

option 获取 或 设置 折 受 面板 选项 
refresh 重新 计算 并 设置 折 释 面板 的 大 小 
widget 返回 折 且 面板 对 象 


表 20-11 选项 卡 工具 集 的 常用 事件 











名 称 说 明 

activate 选项 卡 的 内 容 初始 化 完成 后 触发 该 事件 
beforeActivate 选项 卡 的 内 容 初 始 化 之 前 触发 该 事件 
beforeLoad 选项 卡 的 内 容 被 加 载 完 成 前 触发 该 事件 
load 选项 卡 的 内 容 被 加 载 完成 后 触发 该 事件 











20.4.2 经 典 的 选项 卡 效果 


在 项 目的 页 面 中 ， 为 了 能 够 更 多 地 显示 信息 ， 总 少不了 选项 卡 。 本 小 节 通 过 应 用 jQuery 
UI 插 件 中 的 选项 卡 〈Tab) 组 件 ， 实 现 选 项 卡 功能 ， 有 具体 内 容 见 【范例 20-5】。 

该 案例 的 初始 效果 如 图 20-12 所 示 。 当 鼠标 移动 到 标题 jgong3 上 时 ， 选 项 卡 的 内 容 就 会 
显示 该 标题 所 对 应 的 内 容 ， 效 果 如 图 20-13 所 示 。 
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图 20-12 加 载 页 面 
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jQuery VT Tabs -~ Tabs at bottom + 

€ il/ me is O77 7 C | 图 - BC 


国 访问 最 多 上 ] 留言 和 新 手 上 路 二 jquery01 htal 


cjgong3 cjgong3 cjgong3 cjgong3 cjgong3 cjgong3 cjgong3 cjgong cjgong cjgong cjgong cjgong cjgong cjgong 
cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong 
ojgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong 
Sjgong cjgong 


cjgongl © cigong2 | cjgong3 
Eile:///C:/Docments and Seremos/tabs/bottom, htal#tabs-3 





20-13 鼠标 移动 到 标题 cjgong3 上 的 效果 
在 具体 实现 时 ， 要 设计 一 个 包含 选项 卡 的 页 面 ， 其 HTML 代码 如 下 : 





I <body> 

2 <div id="tabs" class="tabs-bottom"> 

2 <!-- 设 置 选项 卡 组 件 --> 

4. <ul> 

Se <li><a href="#tabs-1">cjgongl</a></1i> 
6。 <1i><a href="#tabs-2">cjgong2</a></1i> 
Ds <li><a href="#tabs-3">cjgong3</a></1i> 
85 </ul> 

3 <div class="tabs-spacer"></div> 

ia <!-- 设 置 选项 卡 的 内 容 --> 

全 <div id="tabs-1"> 


下 2 <p>cjgongl cjgongl cjgongl cjgongl cjgongl cjgongl cjgongl cjgong 
cjgong cjgong cjgong cjgong 

区 二 cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong 
cjgong cjgong cjgong cjgong cjgong 

14. cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong cjgong 
cjgong cjgong cjgong cjgong cjgong 
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DD cjgong cjgong cjgong cjgong .</p> 


LO </div> 

Ls <div id="tabs-2"> 
18 <P>.…</VP> 

19 </div> 

20 <div id="tabs-3"> 
2 <P>.…</P> 

区 2 </div> 

23 </div> 

24. </body> 


下 面 编写 jQuery 代码 ， 实 现 选 项 卡 功 能 ， 具 体 代 码 如 下 。 
【范例 20-5 实现 选项 卡 功能 】 


1 $ (function() { 
2 $( "#tabs" ).tabs(); 
3 // 移 除 和 添加 样式 
4 $( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > xn ) 
5 .removeClass( "ui-corner-all ui-corner-top" ) 
6 .addClass( "ui-corner-bottom" ) 
// 设置 标题 到 下 面 
:证 $( ".tabs-bottom .ui-tabs-nav" ) .appendTo( " .tabs-bottom" ) 
Qa $( "#tabs" ) .tabs({ 
LO event: "mouseover" 
Le })7 
Le 
13. Ds; 
在 上 述 代码 中 : 


@ 第 2 行 代码 通过 tabs() 方 法 将 对 象 tabs 封装 成 选项 卡 对 象 。 
® 第 4-6 行 设置 相关 样式 。 
@ 第 8~11 行 设置 选项 卡 的 标题 在 下 面 ， 同 时 通过 选项 event 设 置 选项 卡 切换 内 容 的 事件 


为 mouseover。 


20.4.3 实现 幻灯 效果 


在 项 目的 页 面 中 ， 经 常 通过 选项 卡 的 幻灯 效果 来 包含 多 张 图 片 。 所 谓 幻灯 效果 ， 是 指 所 
有 选项 卡 中 的 内 容 自 动 轮流 显示 ， 这 样 不 仅 拥 有 很 好 的 视觉 效果 ， 还 能 确保 所 有 访问 者 能 够 
看 到 所 有 的 选项 卡 内 容 。 

本 节 通 过 应 用 jQuery UI 插件 中 的 选项 卡 〈Tab) 组 件 ， 实 现 幻 灯 效 果 ， 具 体内 容 见 【 范 
例 20-6】。 该 案例 的 初始 效果 如 图 20-14 所 示 。 每 隔 一 段 时 间 ， 选 项 卡 就 会 自动 切换 。 如 果 
想 查 看 标题 为 cjgong4 的 内 容 ， 也 可 以 直接 单 击 该 标题 ， 具 体 效 果 如 图 20-15 所 示 。 
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) 选 贡 妇 灯 效 呆 - Enzalla Firefor 
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cjgong1 
cjgong1 cjgong1 cjgong1 cjgong1 cjgong1 cjgong1 


cjgong1 cjgong1 cjgong1 cjgong1 cjgong1 
cjgong1cjgong1 cjgong1 cjgong1 





图 20-14 加 载 页 面 


) 这 项 卡 幻灯 洒洒 - Woxills Firefos 





cjgong4 

clgong4 cjgong4 cjgong4 clgong4 cjgong4 cjgong4 
cjgong4 cjgong4 cjgong4 cjgong4 cjgong4 cjgong4 
cjgong4 cjgong4 cjgong4 cjgong4 cjgong4 cjgong4 


Leam More 
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图 20-15 显示 子 菜单 
在 具体 实现 时 ， 要 设计 一 个 包含 选项 卡 的 页 面 ， 其 HTML 代码 如 下 : 


<body> 
<div id="wrapper"> 
<div id="rotator"> 
<!-- 选项 卡 标题 --> 
<ul class="ui-tabs-nav"> 
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment- 
1"><a href="#fragment-1"><span>cjgong1</span></a></1i> 
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href= 
"#fragment-2"><span>cjgong2</span></a></1i> 
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href= 
"#fragment-3"><span>cjgong3</span></a></1i> 
<1li class="ui-tabs-nav-item" id="nav-fragment-4"><a href= 
"#fragment-4"><span>cjgong4</span></a></1i> 
</ul> 
<!-- 第 一 个 标题 所 对 应 的 内 容 --> 
<div id="fragment-1" class 
<h2>cjgong1</h2> 
<p>cjgongl1 cjgongl cjgongl cjgongl cjgongl cjgongl cjgongl 











ui-tabs-panel" style=""> 
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cjgongl cjgongl cjgongl cjgongl cjgonglcjgongl cjgongl 
cjgongl</P> 
<p><a class="btn get started" href="#">Get Started</a> <a class= 
"btn learn more" href="#">Learn More</a></p> 
</div> 
<!-- 第 二 个 标题 所 对 应 的 内 容 --> 
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> 
</div> 
<!-- 第 三 个 标题 所 对 应 的 内 容 --> 
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> 
</div> 
<!-- 第 四 个 标题 所 对 应 的 内 容 --> 


<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> 


</div> 
</div> 
</body> 


下 面 编写 jQuery 代码 ， 实 现 选项 卡 功能 ， 具 体 代 码 如 下 : 
【范例 20-6 实现 幻灯 效果 功能 】 


$ (document) .ready (function(){ 


$ ("#rotator") // 获 取 选 项 卡 标题 对 象 
.tabs ({fx:{opacity: "toggle"}}) ”// 转 换 成 选项 卡 对 象 
.tabs ("rotate", 4000, true); // 设 置 选 项 卡 每 隔 4 秒 进行 切换 


1) 

在 上 述 代 码 中 : 

e@ 第 2 行 获取 选项 卡 标题 对 象 ， 然 后 在 第 3 行 通过 tabs() 方 法 获取 选项 卡 对 象 ， 最 后 在 
第 4 行 通过 设置 rotate 选项 ， 实 现 每 隔 4 秒 进行 切换 。 

ee 对 于 方法 rotate()， 需 要 两 个 额外 的 参数 ， 第 一 个 参数 是 整数 ， 用 于 指定 每 个 选项 卡 在 
被 下 一 个 选项 卡 取代 之 前 所 显示 的 毫秒 数 。 第 二 个 参数 是 布尔 型 值 ， 用 于 指示 选项 卡 
切换 时 是 一 次 性 还 是 持续 不 断 。 


20.4.4 实现 分 页 效果 


在 项 目的 页 面 中 ， 对 于 所 展示 的 信息 ， 如 果 数 目 比较 多 ， 一 般 都 会 通过 分 页 进行 展示 。 


例如 ， 百 度 页 面 和 Google 页 面 中 展示 搜索 结果 的 效果 ， 如 图 20-16 和 图 20-17 所 示 。 所 谓 4 


页 ， 


就 是 将 一 个 页 面 的 内 容 分 成 两 个 或 多 个 以 上 的 页 面 进行 展示 。 








Dp 

省 Go Sle， 

到 |2||181 | 5] | 6]| 7i SI|9 | 切 || 下 一 页 > 12345678910 Eu 
图 20-16 百度 分 页 效果 图 20-17 google 分 页 效果 


379 


en UI 插件 中 的 选项 卡 Tab) 组 件 也 可 以 实现 分 页 教 果 功能 具体 代码 见 【 范 例 20- 

。 该 案例 的 初始 效果 如 图 20-18 所 示 ， 单 击 “下 一 页 ”， 可 以 显示 第 二 分 页 的 内 容 ， 如 图 
20-19 所 示 ， 然 后 单 击 “ 上 一 页 ”， 则 显示 第 1 a 单 击 标题 “3”， 可 以 显示 第 三 
分 页 的 内 容 ， 如 图 20-20 所 示 ， 以 此 类 推 。 


) 和 页 效 采 - mpzilla Firefor 
) 加 相国。 查看 习 历史 加 ” 书 符 人 工具 四 者 种 op 
地 


Settineyi 加 





第 一 页 内 容 、 BN 党 一 页 内 容 、 祝 一 而 术 和亲、 第 一 页 内 容 、 第 一 页 内 容 、 
最 党 没 页 内 容 、 第 一 册 内 容 、 逢 一 由 A 容 、 第 一 册 上 从 ， 务 一 由 [ 容 、 第 一 页 P] 窜 、 第 一 页 内 





图 20-18 加 载 页 面 


】 书签 工具) 
国 
FB le H/C /Deaments wd Sottines/hin ©@ 


园 访问 是 疼 上 | 留言 [新 手 上 路 [] jsaeryot kt 





图 20-19 单 击 标题 “2” 的 效果 
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) 分 页 效 床 - Bozilla Fircfos 
及 历史 书签 EE 工具 中) 





le /1c /Nownents anal Settitgs/ Mainistrator/ 面 [tah/ 人 2 页 /index ha 





20-20 单 击 “ 下 一 页 ”效果 
在 具体 实现 时 ， 要 设计 一 个 包含 选项 卡 的 页 面 ， 其 HTML 代码 如 下 : 


<body> 
<div id="page-wrap"> 

<div id="tabs"> 

<!-- 选 项 卡 标题 --> 

<ul> 
<li><a hre 
<li><a hre 
<li><a href= 


"#fragment-1">1</a></1i> 
#fragment-2">2</a></1i> 
#fragment-3">3</a></1i> 





<li><a href="#fragment-15">15</a></1i> 
</ul> 
<!-- 选 项 卡 内 容 --> 
<div id="fragment-1" class="ui-tabs-panel"> 
<p> 第 一 页 内 容 、 第 一 页 内 容 、 第 一 页 内 容 .….</p> 


</div> 





<div id="fragment-15" class="ui-tabs-panel ui-tabs-hide"> 
<p> 最 后 一 个 页 面 、 最 后 一 个 页 面 、 最 后 一 个 页 面 </p> 
</div> 
</div> 
</div> 
</body> 


下 面 编写 jQuery 代码 ， 实 现 选 项 卡 功 能 ， 具 体 代 码 如 下 : 
【范例 20-7 实现 分 页 效果 功能 】 


$ (function() { 
var $tabs = $('#tabs') .tabs() ;// 获 取 选 项 卡 对 象 
$(".ui-tabs-panel") .each (function (i){ 
var totalSize = $(".ui-tabs-panel") .length ;// 获 取 分 页 总 页 数 
if (i != totalSize){ // 是 否 显示 "下 一 页 “ 
next 三 谋士 27 
$ (this) .append("<a href='#' class='next-tab mover' rel= 
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wp next + mnY> 下 一 页 </a>w 7 


8. 上 
9. TE (00 // 是 否 显示 ~ 上 一 页 “ 
i prev = i; 
| $ (this) .append("<a href='#' class='prev-tab mover' rel= 
‘w+ prev + "'> 上 一 页 </a>"); 
2 上 
13. 1); 
TA $('.next-tab, .prev-tab').click(function() { 
// 设 置 下 一 页 和 上 一 页 的 单 击 事件 

15。 $tabs.tabs('option',’active’, $(this).attr("rel")); 
55 return false; 
Ey yy 
18% }) 

在 上 述 代码 中 : 


e 第 2 行 通过 tabs() 方 法 获取 选项 卡 对 象 。 

@ 第 3~13 行 实现 分 页 效果 ， 其 中 第 4 行 获取 分 页 总 页 数 ， 第 5~8 行 实现 是 否 显示 “下 
一 页 ”内 容 ， 第 9~12 行 实现 是 否 显示 “上 一 页 ”内 容 。 

@ 第 14~18 行为 字符 串 “ 上 一 页 ”和 “下 一 页 ” 绑 定 单 击 事件 ， 在 事件 处 理 函 数 中 ， 通 
过 选项 卡 的 tabs() 方 法 显示 相应 内 容 。 


20.5 相关 参考 


e jQuery UI 插件 一 一 http://jqueryui.com/。 
e jQuery UI 插件 API 一 一 http://api.jqueryui.com/。 
e jQuery UI 框架 一 一 http://www.open-open.com/lib/list/318。 
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第 21 章 Node.js 简介 


如 果 没 有 Node.js，JavaScript 将 只 能 绑 定 在 Web 客户 端 上 ， 其 备 受 指责 的 文档 对 象 模型 
以 及 其 他 一 些 历史 遗留 问题 将 会 日 益 突出 。Node.js 帮助 JavaScript 摆脱 了 客户 端的 限制 。 
一 一 Brendan Eich，JavaScript 之 父 布 兰 登 。 艾 奇 


如 果 你 已 在 互联 网 入 门 几 年 ， 可 能 知道 Nodejs， 因 为 它 的 名 气 很 大 。JavaScript 之 父 都 
曾 赞 誉 Nodejs， 到 底 是 为 何 呢 ? 本 章 就 来 介绍 这 款 强大 、 流 行 而 又 神秘 的 Node.js。 

本 章 是 入 门 章节 ， 将 从 Nodejjs 的 历史 及 安装 配置 讲 起 ， 本 章 主要 知识 点 : 

e Node.js 是 平台 

@ Node.js 不 是 万 能 的 

e@ Node.js 的 安装 和 使 用 


21.1 什么 是 Node.js 











Node.js 不 只 是 一 个 简单 的 JavaScript 框架 ， 它 提供 的 是 一 种 “语言 级 ”高 度 的 开发 模 
式 ， 是 一 种 新 思维 ， 还 没有 哪 种 语言 能 够 像 它 这 样 可 以 做 到 前 后 端 通用 而 且 如 此 漂亮 。 





21.1.1 Node.js 是 平台 


Node.js 的 发 明 者 是 Ryan Dahl( 见 图 21-1) ， 在 
2008 年 的 时 候 ， 他 想 通 过 一 个 编程 平台 做 一 个 网 站 ， 
能 够 从 服务 器 端 把 数据 主动 推送 给 用 户 。 要 把 事件 推 
送 到 浏览 器 ， 该 平台 需要 能 够 持续 处 理 大 量 打 开 的 网 
络 连接 ， 而 这 其 中 有 许多 连接 其 实 是 空闲 的 。 

Ryan Dahl 在 采访 时 说 : “开始 我 没有 那么 做 
(没有 用 JavaScript) ， 我 用 C、Lua 和 Haskell 做 了 几 
个 失败 的 小 项 目 。Haskell 很 不 错 ， 但 是 还 不 足够 聪明 
可 以 去 玩 通 GHC (Haskell 的 编译 器 ) 。Lua 是 一 种 不 图 21-1 帅气 的 Ryan Dahl 








太 理想 ， 但 是 很 可 爱 的 语言 ， 我 并 不 喜欢 它 ， 因 为 它 已 经 有 了 大 量 的 包含 阻塞 代码 的 库 。 无 
论 我 做 了 什么 ， 有 些 人 总 是 愿意 去 读 取 有 阻塞 的 Lua 库 。C 语言 和 Lua 有 一 些 相似 的 问题 ， 
而 且 它 的 开发 门槛 有 些 高 。 我 开始 的 确 想 写 一 种 像 Node.js 的 libc， 我 也 的 确 做 了 一 段 时 间 。 
这 个 时 候 V8 出 来 了 ， 我 也 做 了 一 些 研究 ， 我 突然 意识 到 ，JavaScript 的 确 是 一 种 完美 的 语 
言 ， 它 有 我 想 要 的 一 切 : 单线 程 ， 没 有 服务 端的 IO 处 理 ， 没 有 各 种 历史 存在 的 库 。” 

于 是 ，Node.js 就 这 样 诞生 在 一 个 只 是 想 做 个 网 站 的 牛人 手中 ， 它 公布 至 今 不 过 才 8 年 
多 ， 但 是 已 经 在 全 球 被 众多 公司 所 使 用 ， 包 括 创业 公司 、 淘 宝 、 沃 尔 玛 、 微 软 等 大 公司 ， 互 
联网 上 每 天 用 Nodejs 处 理 的 请 求 多 以 亿 计 。 

打开 Nodejs 官网 就 可 看 到 它 简 洁 的 Logo 〈 如 图 21-2 所 示 ) ， 接 着 就 是 这 样 一 段 话 : 

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable 
network applications. Node.js uses an event-driven, non-blocking WO model that makes it 
lightweight and efficient, perfect for data-intensive real-time applications that run across distributed 
devices. 


一 —nodejs.org (Node.js 同 克 ) 





图 21-2 Nodejs 新 版 Logo 


不 知情 的 人 说 Node.js 是 一 种 新 语言 ， 更 多 迷茫 的 人 认为 它 是 JavaScript 的 框架 ， 其 实 官 
网 的 解释 非常 清楚 ， 它 是 一 个 基于 Chrome's JavaScript runtime 可 快速 构建 网 络 应 用 的 平台 。 


21.1.2 Node.js 不 是 万 能 世 


在 各 种 媒体 的 推介 下 ，Node.js 如 同 “ 江 南 Style” 一 样 在 短 短 的 时 间 里 成 为 大 家 耳 熟 能 
详 的 神 物 ， 我 们 不 禁 要 问 一 一 Node.js 到 底 能 做 什么 ? 
使 用 Nodejs 可 以 轻松 地 开发 : 


。 超大 型 网 站 
Engine ) 。 

@ 高 并 发 响应 式 Web 应 用 一 一 这 是 Nodejs 作 者 最 初 的 想法 ， 也 是 Web 最 擅长 的 。 

。 Web 服务 器 一 一 几 行 代码 就 可 以 搭建 一 个 Web 服务 器 ， 想 必 它 算是 世界 上 最 简单 、 
快速 的 可 自 定 义 Web 服务 器 搭建 平台 。 

e 编写 GUI 图 形 用 户 界 面 程 序 一 -Node-Qt 就 是 基于 Node.js 的 项 目 ， 开 源 且 跨 平台 。 

@ 单元 测试 工具 一 一 支付 宝 前 端 团队 就 以 此 开发 了 一 个 非常 小 巧 的 工具 totoro。 











如 cnodejs.org 完全 用 Node.js 搭建 ， 包 括 它 们 的 NAE (Node App 
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@ 客户 端 JavaScript 编译 器 一 -有 人 还 用 JavaScript 实现 了 一 个 Java 虚拟 机 ， 叫 作 
Orto。 

e。 TCP/UDP 套 接 字 应 用 程序 。 

。 命令 行 工具 。 


Nodejs 主要 应 用 范围 是 网 络 ， 而 网 络 应 用 的 性 能 瓶颈 之 一 在 于 1/O 处 理 ， 这 已 是 业界 公 
认 的 事实 。 表 21-1 来 自 于 Ryan Dahl 为 JSConf 大 会 作 讲演 时 ， 对 比 在 不 同 介质 上 进行 IO 操 
作 所 花费 的 CPU 时 间 。 





表 21-1 不 同 介质 下 IO 操作 花费 对 比 





W/O 设备 介质 CPU 时 间 消 耗 


250 


41000000 


240000000 


从 表 21-1 能 够 清楚 地 发 现 ， 访 问 磁盘 及 网 络 数据 所 花费 的 CPU 时 间 是 访问 内 存 时 的 数 
十 万 倍 ， 而 现在 的 网 络 应 用 需要 经 常 访 问 磁盘 及 网 络 ， 比 如 数据 库 查 询 、 访 问 互联 网 等 。 如 
何 提高 此 时 CPU 的 利用 效率 ， 便 成 为 提升 网 络 应 用 性 能 的 关键 。 所 以 在 高 性 能 要 求 的 项 目 
中 ， 常 常 需要 各 种 缓存 设计 ， 其 原因 就 是 尽 可 能 利用 内 存 ， 虽 然 内 存 已 经 很 廉价 ， 但 是 其 容 
量 依然 比 磁盘 小 很 多 。 

IO 性 能 瓶颈 产生 的 原因 在 于 传统 的 阻塞 式 处 理 方式 。 这 种 情况 类 似 于 在 火车 站 售票 窗 
口 排队 买 票 ， 如 果 在 春节 期 间 去 火车 站 排队 买 过 票 ， 绝 不 会 认为 这 是 一 种 好 的 处 理 方式 。 后 
来 大 家 发 现 这 种 方式 不 好 ， 于 是 在 春节 期 间 加 开 售 票 窗口 ， 这 好 比 以 前 用 单线 程 处 理 业 务 ， 
现在 用 多 线程 来 处 理 。 但 就 如 读者 所 看 到 的 ， 在 春节 期 间 各 个 售票 窗口 前 还 是 人 满 为 患 。 

为 什么 火车 站 不 再 多 开 一 些 售票 窗口 呢 ? 因为 成 本 。 线 程 也 一 样 ， 在 Java 和 PHP 这 类 
语言 中 ， 服 务 器 每 创建 一 个 新 线程 ， 这 个 新 线程 可 能 需要 2MB 的 配套 内 存 。 在 一 个 拥有 8 
GB RAM 的 系统 上 ， 理 论 上 最 大 的 瞬间 并 发 连接 数量 是 4000 个 用 户 。 

第 一 届 淘 宝 光棍 节 (11 月 11 日 ) 那天 全 国 亿 万 用 户 蜂 拥 而 至 ， 网 页 打开 速度 变 得 极 
慢 ， 这 就 是 瓶颈 带 来 的 不 好 的 用 户 体验 ， 这 也 是 当年 极 具 创意 的 秒杀 现在 不 再 成 为 大 家 热衷 
追捧 对 象 的 重要 原因 之 一 

Nodejs 解决 了 这 个 问题 ， 它 解决 这 个 问题 的 方法 是 : 更 改 连接 到 服务 器 的 方式 。 每 个 连接 
发 射 一 个 在 Nodejs 引擎 的 进程 中 运行 的 事件 ， 而 不 是 为 每 个 连接 生成 一 个 新 的 OS 线程 ， 也 不 
会 为 其 分 配 配套 内 存 ， 即 Nodejs 只 会 占用 很 少 的 内 存 资 源 。 这 就 是 很 多 创业 公司 选择 Nodejs 的 
主要 理由 之 一 一 一 减少 大 量 硬件 设备 开支 ， 这 对 于 刚 起 步 的 公司 或 项 目 来 说 生死 依 关 。 

Nodejs 是 一 个 鼓励 人 们 用 非 阻 塞 的 模式 处 理 WO， 永 远 不 允许 用 户 锁 上 程序 ， 它 要 求 用 
户 不 断 地 处 理 新 事物 ， 因 为 在 服务 器 上 要 与 很 多 用 户 打 交道 ， 锁 住 或 阻塞 了 ， 别 的 用 户 就 不 
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Node.js 也 可 以 说 是 一 个 服务 器 端的 编程 平台 ， 它 不 像 Apache、1IIS 或 Tomcat， 本 质 上 说 
这 些 服务 器 是 安装 就 绪 型 ， 支 持 立 即 部 署 应 用 程序 。 而 Nodejs 则 不 是 这 样 的 平台 ， 最 明显 
的 区 别 是 它 实 现 的 Web 服务 器 很 多 功能 都 需要 用 户 去 创建 ， 比 如 Session 需要 开发 相应 的 模 
块 ， 当 然 也 可 以 直接 使 用 别人 写 好 的 模块 ， 比 如 express 就 是 一 个 很 好 的 Nodejs 模块 。 

Nodejs 只 提供 了 如 何 非 阻塞 处 理 MO， 所 以 从 Web 请 求 那里 获得 任何 原始 的 数据 ， 都 可 
以 交 由 用 户 来 处 理 ， 而 其 他 如 Apache、IIS 或 Tomcat 这 样 的 产品 ， 有 些 是 内 置 的 ， 有 些 需要 
用 其 他 语言 来 编写 插件 。 比 如 你 的 程序 是 用 PHP 写 的 ， 而 IIS 的 插件 可 能 需要 用 C++ 或 VB 
来 编写 ， 而 Nodejs 无 论 是 公用 的 模块 式 插件 还 是 处 理 业务 的 程序 代码 ， 都 可 以 只 用 一 种 编 
程 语言 来 编写 ， 那 就 是 JavaScript。 

Node.js 会 做 的 事情 很 多 ， 但 是 它 也 不 是 万 能 的 ， 尤 其 是 在 某 些 的 确 需要 同步 或 阻塞 模式 
的 情况 下 ， 比 如 Nodejs 不 是 特别 擅长 做 计算 。 

Node.js 因为 年 轻 ， 所 以 还 没有 像 IS、Apache 那样 完美 支持 ASP 或 PHP 的 虚拟 主机 产 
品 ， 有 一 些 实验 性 产品 也 需要 申请 ， 相 信 在 不 久 的 将 来 会 普及 ， 如 果 需 要 ， 可 在 本 地 搭建 环 
境 ， 也 可 以 购买 VPS 或 云 服 务 器 来 搭建 。 

在 什么 情况 下 使 用 Nodejs 呢 ? 一 个 比较 简单 的 判定 就 是 : 使 用 Nodejs 都 是 为 了 避免 去 
等 待 什么 事情 。 

常 有 人 说 Nodejs 并 不 怎么 样 ， 其 实 如 果 一 个 框架 只 是 为 了 解决 任务 A 而 设计 ， 而 你 却 
抱怨 它 不 能 很 好 地 完成 任务 B， 这 是 思春 而 荒 廖 的， 因为 它们 根本 没有 可 比 性 。 

做 擅长 的 事情 ， 这 也 是 人 类 社会 分 工 的 基本 原则 ， 不 必 抱 她 Node.js 做 不 好 它 不 擅长 的 
事情 。Nodejs 不 是 银 弹 ， 但 它 仍然 是 颗 子弹 。 








21.2 获取 、 安 装 和 配置 Node.js 


Node.js 的 获取 、 安 装 和 配置 都 极为 简单 ， 本 节 内 容 以 Windows 7 平台 为 基本 环境 来 讲 
解 ， 如 果 使 用 的 是 非 Windows 7 平台， 那么 也 可 以 安装 虚拟 机 运行 Windows 7 来 练习 本 章节 
的 内 容 。 


21.2.1 Node.js 的 获取 
Nodejs 的 官方 网 站 Cnodejs.org) 首页 有 很 明显 的 安装 按钮 ， 单 击 它 就 可 以 下 载 最 新 版 本 
的 msi 安装 文件 。 


在 官网 dist 目录 (http://nodejs.org/dist/) 下列 出 了 Node.js 发 布 的 所 有 版 本 (如 图 21-3 所 
示 ) 。 
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ner of si x 


ea nodejsorg 加 加 | =- 立 | 和 下 二 


Index of /dist/ 














图 21-3 Nodejjs 发 布 的 所 有 版 本 目录 
单 击 版 本 目录 可 进入 另 一 个 目录 列表 ， 其 中 包括 各 种 格式 打包 的 Node.js 文件 ， 选 择 msi 
结尾 格式 的 文件 下 载 即 可 。 如 果 是 64 位 操作 系统 还 可 以 选择 64 位 版 本 的 安装 文件 ， 不 过 部 
分 早期 版 本 不 提供 64 位 支持 。 


21.2.2 Node.js 的 安装 


以 Node.js 8.9.3 版 本 为 例 ， 双 击 下载 的 node-v8.9.3-x64.msi 文件 即 可 打开 如 图 21-4 所 示 
的 安装 界面 ， 连 续 单 击 Next 按钮 即 可 。 

对 于 已 经 安装 过 旧版 Node.js 的 用 户 ， 新 版 本 会 自动 覆盖 旧版 本 ， 无 须 任何 手动 设置 。 
用 命令 node-v 可 查看 当前 Node.js 的 版 本 号 ， 如 图 21-5 所 示 ， 如 果 能 正确 看 到 版 本 号 ， 则 说 
明 已 经 安装 成 功 。 

法 Nodejasetup EE | 


Welcome to the Node.js Setup Wizard 

















图 21-4 Nodejs 的 安装 图 21-5 查看 Nodejs 当前 版 本 





正常 情况 下 ， 安 装 后 node -v 命令 可 以 在 任何 目录 下 运行 ， 如 果 发 现 不 能 运行 ， 可 以 完 
全 印 载 Nodejs 后 重新 安装 或 重新 安装 一 个 不 同 的 版 本 ， 如 果 仍 然 不 行 ， 可 以 考虑 用 虚拟 机 
环境 安装 。 
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21.2.3 Node.js 的 配置 


安装 完成 后 ，Nodejs 默认 的 路 径 为 C:\Program Filesmodejs， 从 图 21-6 可 以 看 出 ， 
node.exe 是 命令 node 的 主要 执行 文件 ， 此 时 的 node_modules 目录 是 Nodejs 安装 时 附带 的 内 
置 模块 ， 模 块 只 有 一 个 ， 那 就 是 npm。 

模块 npm 也 是 一 个 可 以 在 任意 目录 下 执行 的 命令 ,图 21-7 执行 了 npm -v 以 查看 当前 版 
本 ， 执 行 npm -h 查看 帮助 。npm 是 用 来 管理 Nodejjs 其 他 模块 的 工具 ， 类 似 于 Linux 下 的 apt- 


get、git 等 命令 ， 它 延续 了 Linux 软件 安装 风格 一 一 用 命令 来 安装 和 管理 。 








etc 
node_modules 
I node.exe 


node_etw_provider.man 


node_perfctr_providerman 


nodevars,bat 
npm 
npm.cemd 
npx 

npxcmd 














图 21-6 Nodejs 安装 目录 内 容 图 21-7 查看 npm 的 版 本 和 帮助 信息 
图 21-7 列举 的 命令 中 最 常用 的 是 list、install 和 uninstall， 顾 名 思 义 它们 分 别 是 查看 当前 已 
安装 、 安 装 和 印 载 功能 ， 先 来 看 一 下 执行 list 命令 的 效果 ， 如 图 21-8 所 示 ， 它 展示 了 当前 目录 
下 的 安装 结构 树 ， 其 中 每 一 项 @ 符 号 后 是 其 模块 的 版 本 ， 图 21-9 是 没有 安装 过 模块 的 目录 。 


0 站 至 + li | 








图 21-8 执行 npm list 命 令 图 21-9 没有 安装 过 模块 的 目录 
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因为 npm 可 以 在 任意 目录 执行 ， 所 以 npm install 命令 会 把 择 件 安装 在 当前 路 径 下 ， 这 一 
点 需要 注意 。 下 面 以 安装 本 书 常 提起 的 express 模块 为 例 来 安装 。 

笔者 计划 安装 在 C:\Program Filesmodejs 目录 下 ， 执 行 命令 npm install express， 如 图 21-10 
所 示 表 示 正 常 ， 这 时 务必 保证 网 络 畅通 ， 对 于 大 模块 或 者 网 络 不 是 很 好 的 情况 下， 就 需要 多 
等 待 一 段 时 间 ， 直 到 命令 自动 提示 错误 信息 为 止 。 








图 21-10 执行 命令 npm install express 


命令 执行 过 程 中 可 能 会 有 一 些 警告 信息 ， 如 果 最 终 没 有 失败 ， 可 以 忽略 这 些 信息 ， 安 装 
成 功 后 ， 在 nodejs\node_modules\express 中 会 看 到 express 的 内 容 ， 如 图 21-11 所 示 。 








图 21-11 安装 express 模块 成 功 


印 载 命 令 则 相对 简单 ， 使 用 npm uninstall express 和 npm remove express 都 可 以 达到 此 目的 。 


21.3 Node.js 与 其 他 服务 器 脚本 语言 的 比较 


1. Nodejs 和 PHP 比较 











(1) PHP 发 展 了 十 多 年 ， 由 于 历史 原因 ， 它 夹杂 了 很 多 历史 库 包 文件 ， 因 此 很 多 常用 功 
能 都 内 置 为 函数 ， 可 以 直接 调用 ， 而 Nodejs 没有 提供 太 多 功能 函数 〈 随 着 日 积 月 累 可 能 也 
会 越 来 越 多 ) ， 例 如 session 这 样 的 管理 PHP 里 就 是 内 置 对 象 ， 而 Node.js 则 需要 安装 插件 或 
自己 实现 。 
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(2) PHP 代码 允许 和 HTML 代码 混 排 书写 〈 范 例 21-1) ， 而 Node.js 的 代码 是 用 
JavaScript 语法 写 的 ， 严 格 遵守 JavaScript 的 语法 标准 ， 不 能 够 和 其 他 语言 混 排 书写 。 


【范例 21-1 PHP 代码 的 混 排 】 


I <html> 

2 <body> 

Ba <?php ”//php 代码 开始 

4. Si=17 // 给 变量 i 赋值 

5 while ($i<=5){ 

6. ?> <!--//php 代码 结束 --> 
Le The number is <?php echo $i?> <!--echo 方法 输出 变量 i 的 值 --> 
8. <?php 

9 Si++7 // 变 量 i 自 增 

1 } 

上 ?> 

2 </body> 

内 </html> 


(3) PHP 和 JavaScript 同样 是 松散 类 型 语言 ， 即 在 声明 时 不 需要 指定 其 数据 类 型 ， 在 调 
用 时 会 自动 转换 成 需要 的 数据 类 型 。 

(4) PHP 在 Windows 平 台 下 也 能 得 到 良好 支持 ，Nodejs 也 是 如 此 。 

2. Nodejs 和 Java 比较 

(1) Java 是 编译 型 的 静态 语言 ，Node.js 使 用 的 是 动态 语言 JavaScript。 每 次 修改 时 ，Java 
需要 让 Tomcat 这 样 的 Web 服务 器 去 编译 ， 而 Nodejs 则 需要 重新 启动 应 用 (IIS 7 可 以 自动 执 
行 修 改 检测 ， 然 后 自动 重启 ) 。 

(2) Java 一 般 和 Linux 平台 结合 ， 少 有 Windows 平台 的 应 用 ， 而 Node.js 在 Windows 平 
台 下 也 能 运行 。 

(3) Java 的 上 手 成 本 比较 高 ， 而 写 过 JavaScript 的 人 都 很 容易 使 用 Nodejs。 

3. Nodejs 和 ASP 比较 

ASP 和 PHP 类 似 ， 只 是 ASP 默认 内 置 的 是 VBScript 语言 ， 但 是 ASP 可 以 设置 JScript 语 
言 作 为 其 运行 语言 ，JScript 是 微软 出 品 的 类 似 JavaScript 的 编程 语言 ， 语 法 极其 接近 ， 也 就 
是 说 在 IIS 服务 端 也 可 以 运行 熟悉 的 JavaScript 风格 的 代码 。 

4. Node.js 和 Python 比较 

Python 也 是 一 种 脚本 语言 ， 但 是 比 其 他 脚本 语言 ， 从 功能 、 易 用 性 上 更 加 强大 。 它 诞生 
时 间 比 Nodejs 更 早 ， 和 Nodejs 一 样 也 是 跨 平台 的 。 


21.4 Node.js 与 客户 端 JavaScript 脚本 的 比较 


Node.js 中 的 JavaScript 和 浏览 器 中 客户 端 JavaScript 虽然 是 一 母 所 生 ， 但 是 因 后 天 环境 
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的 不 同 ， 还 是 有 些 区 别 的 。 
在 Nodejs 中 永远 也 见 不 到 浏览 器 中 的 这 些 标签 : 


<Soript>e ses </script> 

















从 传统 意义 上 说 ，JavaScript 由 ECMAScript、DOM 和 BOM 组 成 ， 这 在 第 1 章 已 有 讲 
述 ， 可 以 理解 为 : 当 JavaScript 在 客户 端 时 ， 浏 览 器 就 是 JavaScript 的 宿主 ， 它 为 JavaScript 
提供 了 除 核心 ECMAScript 部 分 以 外 的 DOM 和 BOM。 当 JavaScript 在 Nodejs 中 时 ，Node.js 
就 是 JavaScript 的 宿主 ， 它 也 为 JavaScript 提供 核心 ECMAScript， 但 是 不 包含 DOM、 
BOM， 这 是 因为 Node.js 不 运行 在 浏览 器 中 ， 所 以 不 需要 使 用 浏览 器 中 的 许多 特性 。 

Nodejs 作者 认为 JavaScript 在 服务 端 运行 ， 还 需要 诸如 文件 系统 、 模 块 、 包 、 操 作 系统 
API、 网 络 通信 等 ECMAScript 没有 或 者 不 完善 的 功能 ， 于 是 在 Nodejs 不 断 完善 的 过 程 中 逐 
步 增加 了 这 些 功能 。 它 超越 了 浏览 器 提供 给 JavaScript 的 扩展 ， 也 提供 了 足够 丰富 的 基本 功 
能 而 无 须 像 其 他 Web 服务 器 那样 需要 另行 开发 扩展 和 插件 。 

浏览 器 提供 的 console.log 方法 在 Node.js 中 也 被 实现 了 ， 解 决 了 很 多 开发 习惯 的 问题 ， 
相信 这 是 很 多 前 端 开 发 人 员 最 常 使 用 的 工具 。 

Node.js 不 运行 在 浏览 器 中 ， 所 以 也 就 不 存在 JavaScript 的 浏览 器 兼容 性 问题 ， 可 以 放心 
地 使 用 JavaScript 语言 的 所 有 特性 。 

Node.js 和 客户 端 浏览 器 都 包含 核心 的 JavaScript， 所 以 一 些 JavaScript 的 天 生 缺 陷 也 一 并 
存在 ， 比 如 千年 虫 Bug 问题 ， 这 是 因为 JavaScript 作者 在 1995 年 5 月 ， 用 了 大 概 10 天 的 时 
间 开 发 了 解释 器 ， 包 括 除 Date 对 象 以 外 的 其 他 内 置 对 象 。 但 是 在 这 期 间 ，Netscape 的 Ken 
Smith 用 C 语言 重 写 了 Java 的 java.util.Date 类 ， 而 JavaScript 的 Date 对 象 是 直接 使 用 Java 
的 ， 就 这 样 千年 虫 Bug 也 在 无 意 间 被 带 进 了 JavaScript。 


21.5 相关 参考 


e 2009 年 2 月 ， Nodejs 的 作者 Ryan Dahl 在 博客 上 宣布 准备 基于 V8 创建 一 个 轻 量 级 的 
Web 服务 器 并 提供 一 套 库 。 

e@ 2009 年 5 月 ，Ryan Dahl 在 GitHub 上 发 布 了 最 初版 本 的 部 分 Node.js 包 ， 随 后 几 个 月 
里 ， 有 人 开始 使 用 Node.js 开发 应 用 。 

@ 2009 年 11 月 和 2010 年 4 月 ， 两 届 JSConf 大 会 都 安排 了 Node.js 的 讲座 。 

e@ 2010 年 年 底 ，Node.js 获得 云 计算 服务 商 Joyent 的 资助 ， 创 始 人 Ryan Dahl 加 入 Joyent 
全 职 负责 Node.js 的 发 展 。 

® 2011 年 7 月 ，Node.js 在 微软 的 支持 下 发 布 Windows 版 本 。 





GitHub 网 址 是 www-github.com， 这 是 一 个 分 布 式 的 开源 代码 库 以 及 版 本 控制 系统 。 
ER 
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第 22 间 构造 一 个 最 简单 的 Web 服务 络 


Web 倒是 可 以 给 梦想 者 一 个 启示 ， 你 能 够 拥有 梦想 ， 而 且 梦 想 能 够 实现 ， 网 络 是 离 你 梦 
想 最 近 的 地 方 ! 
一 一 图 灵 奖 获得 者 文 特 。 瑟 夫 


初步 了 解 Nodejs 之 后 ， 下 面 带领 大 家 构建 一 个 最 简单 的 Node.js 应 用 一 一 Web 服务 器 。 
说 到 Web 服务 器 ， 必 然 涉及 互联 网 。 带 姆 。 伯 纳 斯 。 李 (Tim Berners-Lee)〉 萎 士 就 是 万 维 网 
的 发 明 者 (如 图 22-1 所 示 ) ， 他 是 互联 网 之 父 。 第 一 个 图 形 化 Web 浏览 器 是 World Wide 
Web， 作 者 就 是 Tim Berners-Lee。 第 一 个 开始 运行 的 Web 服务 器 是 nxoc01.cern.ch 。 





ae | 
图 22-1 互联 网 之 父 


构建 新 型 Web 应 用 编程 平台 ， 这 个 平台 首先 要 








本 章 将 实现 Node.js 之 父 最 初 的 想法 
有 Web 服务 器 ， 本 章 主要 知识 点 : 


ee HTTP 协议 
日 Web 服务 器 基础 
e Node.js 编程 风格 


22.1 Node.js 中 脚本 文件 的 组 织 


要 让 JavaScript 这 个 “脚本 ”级 的 编程 语言 在 服务 端 合理 、 高 效 地 运行 ， 首 先 要 解决 的 
问题 就 是 源 代 码 文件 结构 的 组 织 和 管理 。 


22.1.1 CommonJS 规范 
和 其 他 编程 平台 对 比 而 言 ， 原 生 JavaScript 有 以 下 不 足 。 
JavaScript 没有 模块 系统 ， 没 有 原生 的 支持 密闭 作用 域 或 依赖 管理 。 
JavaScript 没有 标准 库 ， 除 一 些 核心 库 之 外 ， 没 有 文件 系统 的 API、IO 流 API 等 。 


二 
. 
e@ JavaScript 没 有 标准 接口 ， 没 有 如 Web Server 或 者 数据 库 的 统一 接口 。 
@ JavaScript 没 有 包 管 理 系统 ， 不 能 自动 加 载 和 安装 依赖 。 





更 多 ECMAScript 的 API 是 由 它 的 宿主 程序 /环境 提供 的 ， 在 Nodejs 出 现 之 前 ， 人 们 还 
没有 意识 到 JavaScript 能 够 存活 于 浏览 器 这 个 宿主 环境 之 外 ， 为 了 统一 在 浏览 器 之 外 的 实 
现 ，CommonJS 就 诞生 了 。 

CommonJS 诞生 于 2009 年 8 月 ， 它 试图 定义 一 套 普通 应 用 程序 使 用 的 API， 从 而 填补 
JavaScript 标准 库 过 于 简单 的 不 足 ， 其 终极 目标 是 希望 JavaScript 写 的 应 用 程序 可 以 在 不 同 环 
境 中 运行 。 它 本 身 不 参与 实现 ， 将 其 实现 交 给 类 似 Node.js 这 样 的 项 目 ， 如 图 22-2 所 示 。 


mongoDB ee | [dS) ringojs 


图 22-2 基于 CommonJS 的 产品 














Node.js 是 目前 CommonJS 规范 最 热门 的 一 个 实现 ， 基 于 Common]JS 的 Modules/1.0 规 
范 ， 实 现 了 Nodejs 的 模块 ， 使 Node.js 对 其 脚本 文件 的 组 织 更 加 合理 和 规范 。 


22.1.2 Node.js 中 的 模块 


在 创建 第 一 个 Web 服务 器 之 前 ， 有 必要 先 了 解 一 下 Nodejs 是 如 何 实现 CommonJS 模块 
规范 的 ， 这 有 助 于 理解 后 面 的 代码 。 

Node.js 自身 实现 了 require 方法 作为 其 引入 模块 的 方法 ， 同 时 npm 也 基于 CommonJS 定 
义 的 包 规 范 ， 实 现 了 依赖 管理 和 模块 自动 安装 等 功能 。 在 第 21 章 里 已 使 用 过 npm 命令 。 

Nodejs 的 模块 分 为 两 类 : 一 类 为 原生 内 置 模块 ， 另 一 类 为 用 户 文件 模块 。 原 生 模块 在 
Nodejs 源 代码 编译 的 时 候 编 译 进 了 二 进 制 执行 文件 ， 加 载 的 速度 最 快 ， 另 一 类 文件 模块 是 动 
态 加 载 的 ， 加 载 速度 比 原生 模块 慢 。 但 是 Node.js 对 原生 模块 和 文件 模块 都 进行 了 缓存 ， 于 





395 


是 在 第 二 次 require 时 ， 是 不 会 有 重复 开销 的 。 
Nodejs 的 原生 内 置 模块 在 调用 的 时 候 只 需要 其 名 称 即 可 : 


require('http') 


Node.js 的 用 户 文件 模块 通常 指 自行 扩展 的 一 些 js 文件 、json 文件 和 .node 文件 。 在 引用 
文件 模块 的 时 候 要 加 上 文件 的 路 径 : 


require('./filename.js') 
其 中 : 


e /filenamejs 表示 绝对 路 径 。 
e ./filename.js 表示 相对 路 径 ， 从 同一 文件 夹 下 开始 计算 。 
@ ../ 表 示 上 一 级 目录 。 


由 于 Nodejs 还 在 发 展 中 ， 因 此 很 多 版 本 的 API 并 不 一 致 ， 网 上 提 到 的 require paths 属 
ETEEE 性 在 高 版 本 中 是 不 存在 的 ， 最 好 参考 官网 的 API 说 明 。 


22.1.3 HTTP 协议 


在 创建 第 一 个 Web 服务 器 之 前 ， 还 有 一 些 知 识 需 要 了 解 ， 那 就 是 HTTP 协议 ， 服 务 器 是 
提供 Web 服务 的 ， 浏 览 器 是 访问 Web 服务 的 ， 那 么 服务 器 和 浏览 器 之 间 到 底 是 按照 何 种 机 
制 来 相互 通信 的 呢 ? 这 就 是 HTTP 协议 要 解决 的 问题 。 

HTTP 是 Hyper Text Transfer Protocol ( 超 文本 传输 协议 ) 的 缩写 。 它 的 发 展 是 万 维 网 协 
会 (World Wide Web Consortium ) 和 Internet 工作 小 组 IETF (Internet Engineering Task 
Force) 合作 的 结果 ， 他 们 发 布 的 RFC 2616 就 是 今天 最 普遍 使 用 的 一 个 版 本 一 一 HTTP 1.1。 

HTTP 协议 在 TCP/IP 协议 栈 中 的 位 置 如 图 22-3 所 示 。 





HTTP 


TLS、 SSL 


TCP 








到 











数据 链 路 层 





图 22-3 HTTP 协 议 在 TCP/IP 协议 栈 中 的 位 置 


图 22-4 展示 了 HTTP 协议 的 工作 模型 ， 请 求 在 先 ， 响 应 在 后 ， 所 以 HTTP 协议 永远 都 是 
客户 端 发 起 请 求 ， 服 务 器 回 送 响应 。 
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请 求 
< 


响应 
Client Server 


22-4 HTTP 的 请 求 响应 模型 


这 也 是 服务 器 无 法 将 消息 推送 给 客户 端 或 者 发 布 广播 消息 的 原因 ， 诸 如 聊天 系统 、 网 络 
游戏 等 应 用 。 如 果 要 在 HTTP 协议 上 实现 ， 就 需要 做 模拟 操作 或 者 嵌入 Flash 等 来 处 理 这 种 
业务 。 

-次 HTTP 操作 称 为 一 个 事务 ， 其 过 程 可 分 为 4 步 。 


TI01 首先 客户 机 与 服务 器 需要 建立 连接 。 只 要 单 击 某 个 超级 链接 ，HTTP 的 工作 即 开始 。 

人 2 建立 连接 后 ， 客 户 机 发 送 一 个 请 求 给 服务 器 ， 请 求 方式 的 格式 为 : 统一 资源 标识 符 
( URL ) 、 协 议 版 本 号 ， 后 边 是 MIME 信息 ， 包 括 请 求 修饰 符 、 客 户 机 信息 和 可 能 
的 内 容 。 

人 3 服务 器 接 到 请 求 后 ， 给 予 相 应 的 响应 信息 ， 其 格式 为 一 个 状态 行 ， 包 括 信息 的 协议 
版 本 号 、 一 个 成 功 或 错误 的 代码 ， 后 边 是 MIME 信息 ， 包 括 服务 器 信息 、 实 体 信息 


和 可 能 的 内 容 。 
人 04 容 户 端 接收 服务 器 所 返回 的 信息 并 通过 浏览 器 显示 在 用 户 的 显示 屏 上 ， 然 后 客户 机 
与 服务 器 断 开 连接 。 


通过 Capture Filter 和 HttpWatch 等 工具 可 以 非常 清晰 地 看 到 客户 端 浏览 器 与 服务 器 的 交 
互 过 程 。 图 22-5 是 Firebug 工具 提供 的 一 些 HTTP 操作 过 程 信息 。 





百度 一 下 。 存 台 如 首 ~ 


六 御 四 ”可 吉 名 冯 硬 历史 加、 牙 加。 工具 名， 和 第 如 
本 度 一 下。 人 Wer 才 区 
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22-5 Firebug 提供 的 HTTP 信 息 
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因为 HTTP 协议 基于 TCP/IP 协议 ， 所 以 DoS (Denial of Service， 拒 绝 服务 ) 攻击 对 基于 
HTTP 协议 的 Web 应 用 (网 站 是 常见 应 用 之 一 ) 是 有 效 的， 而 且 也 是 当下 最 严重 的 危害 之 
一 。 目 前 主要 有 以 下 两 种 攻击 。 


@ 一 种 攻击 方式 是 使 用 大 量 符合 协议 的 正常 服务 请 求 ， 由 于 每 个 请 求 耗费 很 大 的 系统 资 
源 ， 导 致 正常 服务 请 求 不 能 成 功 。HTTP 协议 是 无 状态 协议 ， 攻 击 者 构造 大 量 搜索 请 
求 ， 这 些 请 求 耗 费 大 量 服务 器 资源 ， 导 致 DoS。 对 于 这 种 方式 的 攻击 比较 好 处 理 ， 由 
于 是 正常 请 求 ， 暴 露 了 正常 的 源 耳 地 址 ， 禁 止 这 些 IP 就 可 以 了 ， 这 就 是 很 多 Web 网 
站 会 限制 用 户 刷新 网 页 速度 的 原因 。 

@ 另 一 种 攻击 方式 是 在 HTTP 操作 第 2 步 时 不 断 发 送 没有 完成 的 HTTP 头 ， 在 HTTP 操 


作 第 3 步 的 服务 器 端 会 等 在 那里 准备 接收 余下 的 内 容 ， 一 直到 接收 超时 ， 然 后 关闭 连 
接 。 服 务 器 的 资源 是 有 限 的 ， 当 服务 器 耗 尽 所 有 的 资源 时 ， 那 些 正常 的 请 求 就 接收 不 
到 了 。 


IP 被 禁用 还 可 以 换 中， 或 者 同时 使 用 多 台 设 备 ， 多 个 不 同 IP 同时 发 起 这 些 DoS 请 求 ， 
于 是 DDoS (Distributed Denial of Service， 分 布 式 拒绝 服务 ) 攻击 就 诞生 了 。 要 执行 DDoS 攻 
击 首要 条 件 就 是 控制 很 多 网 络 设备 〈 一 般 是 接 入 互联 网 的 电脑 设备 ) ， 被 控制 的 设备 称 为 
“肉鸡 ”。 

作为 程序 开发 者 来 说 ， 保 护 程序 安全 、 减 少 Bug 是 必须 要 做 的 事情 。 


22.2 建立 服务 、 路 径 处 理 与 响应 


通过 Nodejs 创建 一 个 Web 服务 器 ， 要 写 的 代码 可 能 不 是 最 少 的 ， 但 是 一 定 是 最 容易 理 
解 的 。 现 在 就 来 看 看 具体 的 范例 代码 。 


22.2.1 用 6 行 代码 创建 的 Web 服务 器 


用 熟悉 的 语言 、 较 少 的 代码 创建 完全 自 定 义 的 Web 服务 器 ， 对 于 Node.js 来 说 ， 相 当 简 
单 。【 范 例 22-1】 是 一 个 经 典 的 Hello World 范例 ， 当 在 浏览 器 中 访问 http:/127.0.0.1:1337 时 
会 看 到 Hello World 字样 。 
【范例 22-1 最 少 代码 的 自 定义 Web 服务 器 】 
var http = require('http'); //require 引用 内 置 模块 http 
http.createServer (function (req, res) { 
res.writeHead(200, {'Content-Type': 'text/plain'}); // 设 置 头 信息 
res.end('Hello World\n'); // 输 出 内 容 
elleton(LS37 7 12 OO Ls // 绑 定 IP 和 端口 


On 必 wwN 
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6. console.1log('Server running at http://127.0.0.1:1337/'); // 控 制 台 输出 提示 


第 1 行 用 require 内 置 方法 调用 Nodejs 内 置 模块 http，createServer 方 法 支持 一 个 callback 
回调 函数 ， 这 个 函数 是 Web 服务 器 主要 的 处 理 函 数 ， 程 序 员 在 这 里 做 各 种 常见 业务 的 处 理 和 
控制 ， 本 例 中 只 是 响应 一 个 文档 头 Content-Type， 并 输出 内 容 Hello Worldm。 第 5 行 是 链 式 
写法 ， 调 用 一 个 listen 方法 ， 将 处 理 代码 绑 定 在 本 机 IP 的 1337 端口 上 。 网 络 上 默认 的 Web 
服务 器 端口 是 80。 最 后 ， 在 控制 台 输出 一 段 提示 信息 。 将 【范例 22-1】 保 存 为 js 文件 放 到 某 
个 地 方 ， 在 命令 行 提 示 符 下 运行 后 的 效果 如 图 22-6 所 示 。 




















图 22-6 启动 最 少 代码 的 自 定 义 Web 服务 器 


现在 Web 服务 已 经 建立 ， 只 需要 关闭 CMD 窗口 或 是 直接 按 Ctrl+C 快捷 键 即 可 停止 Web 
服务 器 ， 是 不 是 很 简单 ? 相 比 IIS 和 Apache 这 样 的 Web 服务 器 来 说 ， 前 者 是 蚂蚁 而 后 者 就 是 
大 和 涌 : 


22.2.2 让 Web 服务 器 响应 和 处 理 不 同 路 径 


细心 的 读者 可 能 会 发 现 【范例 22-1】 构 建 的 Web 服务 器 无 论 网址 后 面 的 路 径 和 参数 是 什 
么 ， 只 要 了 P 和 端口 是 正确 的 ， 它 始终 只 会 做 出 一 个 反应 显示 “Hello World”。 

这 样 的 服务 器 有 什么 用 呢 ? 实用 价值 都 没有 。 一 个 正常 的 网 站 ， 哪 怕 是 纯 静 态 的 网 
站 ， 都 会 有 不 同 的 路 径 ， 如 何 才能 让 它 变 得 正常 呢 ? 比如 首页 显示 “Hello World”， 其 他 页 
面 就 显示 请 求 的 网 址 。 请 看 【范例 22-2】 中 的 代码 。 

【范例 22-2 让 Web 服务 器 响应 和 处 理 不 同 路 径 】 











var http = require('http'); //require 引用 内 置 模块 httPp 

2 var url = require('url'); //require 引用 内 置 模块 url 

呈 5 http.createServer (function (req, res) { 

4. res.writeHead (200，{'Content-Type': 'text/plain'});// 设 置 头 信息 
5。 var pathname = url.parse (req.url) .pathname; // 把 请 求 网 址 交 给 url 对 象 处 理 
6. var bodyStr =""; // 定 义 一 个 变量 ， 用 来 存储 要 输出 的 内 容 

if (pathname==="/") { // 如 果 是 首页 

8. bodyStr = 'Hello World\n'; 

9 }elsef{ 

0 bodyStr = req.url; // 如 果 是 其 他 路 径 

Tr 时 
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1 res.end(bodyStr) // 输 出 内 容 
3 }) .Listen(9527，"127.0.0.17)7 // 绑 定 IP 和 端口 
14. console.log('Server running at http://127.0.0.1:9527/');// 控 制 台 输 出 提示 


在 命令 行使 用 node 22-2.js 启动 这 个 范例 的 服务 ， 然 后 在 浏览 器 中 输入 localhost:9527 和 
localhost:9527/other 可 以 看 到 期 望 的 效果 ， 如 图 22-7 所 示 。 
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图 22-7 让 Web 服务 器 响应 和 处 理 不 同 路 径 


再 改变 一 下 业务 需求 ， 首 页 显示 不 变 ， 增 加 一 个 /about 关于 页 面 ， 显 示 一 些 联系 信息 ， 
其 他 页 面 就 提示 404 not found。 随 着 请 求 路 径 的 增长 ， 用 if 判断 的 方式 对 代码 组 织 很 不 友 
好 ， 下 面 改 用 对 象 来 尝试 一 下 。 请 看 【范例 22-3】。 

【范例 22-3 可 配置 的 路 径 】 


var http = require('http'); //require 引用 内 置 模块 http 

和 var url = require('url'); //require 引用 内 置 模块 url 

var webPath = { // 许 可 的 路 径 

4. "/":"Hello WorldNnny 

Se "Vabout":"ID:z3f\noo:10590916" 

6. 让 

了 < http.createServer (function (req, res) { 

8. res.writeHead(200，{'Content-Type': 'text/plain'});// 设 置 文件 头 信息 

9. var pathname = url.parse (req.url) .pathname; // 把 请 求 网 址 交 给 url 对 象 处 理 

LO // 如 果 访 问 路 径 没有 被 webPath 指定 就 是 Not found 

var bodyStr = webPath[pathname] || "Not found! \n"+req.url+" was not 
found on this server."; 

2 res.end (bodyStr) ; // 输 出 内 容 

1 }) .listen(9527, '127.0.0.1°'); // 绑 定 IP 和 端口 


14. console.log('Server running at http://127.0.0.1:9527/'); // 控 制 台 输出 提示 


运行 代码 之 后 ， 通 过 图 22-8 会 发 现 之 前 请 求 的 /other 路 径 现在 提示 Not found， 这 是 因为 
我 们 没有 把 它 放 到 许可 列表 中 。 





























文件 中 ”编辑 下 查看 WD 历史 G) 书 和 名 工 和 文件 和 六 辑 到 ) 查看 YW) 历史 (5) 书签 加 I 
| http’//localhost:9527/about EE | Jhttp://localhost:9527/other 0 

所 加 locubos 广 四 ”Cc|| 图 -P| 昧 外 Bleahs 一 加 -cj| 回 -二 月 及 1 
ID:z3f Not found! 

QQ:10590916 /other was not found on this server. 





图 22-8 可 配置 的 路 径 
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22.3 异步 与 文件 处 理 


前 面 的 Web 服务 器 已 经 能 够 响应 不 同 的 路 径 了 ， 但 是 一 般 的 普通 文件 都 会 提示 Not 
found， 在 这 里 ， 我 们 就 给 Web 服务 器 添加 文件 请 求 的 处 理 ， 由 于 文件 的 类 型 很 多 ，Web 服 
务 器 要 做 的 事情 就 更 多 了 。 


22.3.1 智能 的 404 提示 


从 前 面 的 例子 可 以 知道 ， 错 误 的 请 求 还 是 很 容易 出 现 的 ， 即 使 是 互联 网 上 成 熟 的 网 站 也 
会 出 现 ， 原 因 有 很 多 ， 比 如 : 

”连接 过 期 一 一 对 于 搜索 引擎 连接 过 去 的 网 页 经 常 出 现 。 

@ 用 户 手 误 一 一 用 户 可 能 打 错 网 址 。 

e 程序 Bug 一 一 在 动态 网 页 下 可 能 出 现 。 


在 实际 项 目 中 ，404 提示 是 一 个 独立 的 HTML 页 面 ， 而 不 是 像 上 面 那样 把 提示 信息 内 置 
在 程序 里 。 也 就 是 说 ， 如 果 发 生 有 文件 找 不 到 的 情况 ， 程 序 应 该 直接 读 取 404 提示 页 面 ， 然 
后 把 其 中 的 内 容 发 送 给 客户 端 浏览 器 ， 如 【范例 22-4】 所 示 。 

【范例 22-4 让 Web 服务 器 智能 处 理 404 错误 】 


a var http = require('http'); //require 引用 内 置 模块 http 
var url = require('url'); //require 引用 内 置 模块 url 
35 var fs = require('fs'); //require 引用 内 置 模块 fs 
4. var webPath = { // 许 可 的 路 径 
5。 "/":"Hello World\n", 
7 "/about":"ID:z3f\noo:10590916" 
Ts 和 
Var on200 = function (req,res,bodystr){ 
9 res.writeHead(200，{'Content-Type': 'text/plain'});// 设 置 文件 头 信 息 
0 res.end (bodystr); // 对 客户 端 输出 内 容 后 结束 
11。 } 
2 Var on404 = function(req,res){ 
过 洒 fs.readFile("server/404.html", "binary", function (err, file) { 
// 用 内 置 fs 对 象 读 取 文 件 
属 res.writeHead(404，{'Content-Type': 'text/html'});// 设 置 文件 头 信息 
从 res.write (file,，"binary"); // 将 读 取 的 内 容 输 出 给 客户 端 
16. res.end(); // 结 束 输出 
EL Hs 
18 ] 7 
全 http.createServer (function (req, res) { 
gO var pathname = url.parse (req.url) .pathname; // 把 请 求 网 址 交 给 url 对 象 处 理 
2 var bodyStr = webPath[pathname];// 如 果 访 问 路 径 没 有 被 webPath 指定 会 返回 
undefined 
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5 if (bodystr) { 


288 on200 (req，res,bodyStr) ; // 找 到 许可 路 径 就 让 on200 函数 处 理 

24. }elsef{ 

25 on404 (req，res); // 没 找到 就 让 on404 函数 处 理 

26. } 

275: }) .listen(9527，'127.0.0.1'); // 绑 定 IP 和 端口 

28 . console.1log('Server running at http://127.0.0.1:9527/');// 控 制 台 输出 提示 


将 404 错误 页 面 放 在 子 目录 server 下 ， 这 样 分 离 的 好 处 是 ， 如 果 只 改变 404.html 文件 的 
提示 内 容 ， 那 么 服务 器 不 用 做 任何 改动 ， 甚 至 重启 都 不 用 ， 相 对 于 【范例 22-3】 那 样 的 设计 
来 说 ， 便 利 很 多 ,减少 了 维护 成 本 。 

其 中 fs.readFile 就 是 一 个 异步 方法 ， 该 段 代码 的 意思 就 是 ， 用 二 进 制 binary 的 方式 读 取 
当前 目录 下 的 文件 server/404.html， 当 读 取 完 成 时 执行 回调 函数 ， 将 错误 信息 err 和 文件 内 容 
file 通过 参数 回 传 给 回调 函数 进行 进一步 处 理 。 如 果 要 同步 处 理 ， 官 网 上 还 提供 了 
fs.readFileSync 方法 。 

现在 ， 这 样 的 处 理 方式 对 于 我 们 开发 者 来 说 是 比较 智能 的 ， 但 是 用 户 却 体会 不 到 ， 看 看 
图 22-9 蘑菇 街 的 404 设计 ， 在 错误 提示 页 面 显示 了 一 些 公益 信息 。 
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22-9 蘑菇 街 设计 的 智能 化 公益 广告 


在 这 里 ， 我 们 设计 成 简单 地 输出 一 条 随机 的 名 人 名 言 ， 事 实 上 的 项 目 是 读 取 数 据 库 或 是 
获取 到 的 其 他 信息 ， 把 名 人 名 言 单独 存 为 一 个 json 用 户 自 定义 模块 文件 放 到 同 级 目录 下 ， 其 
内 容 是 : 


"1": "设计 是 一 个 发 现 问题 的 过 程 ， 而 不 是 发 现 解 决 方案 的 过 程 一 Leslie Chicoine"， 
"2": "一 个 好 的 程序 员 应 该 是 那 种 过 单行 线 都 要 往 两 边 看 的 人 一 Doug Linder"， 
"3": "解决 问题 大 多 数 都 很 容易 ;找到 问题 出 在 哪里 却 很 难 一 无 名 " 
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定义 好 后 ， 在 【范例 22-4】 中 的 顶部 添加 一 行 引用 : 
var msg0f404 = require('./22-5.json'); //require 引用 自 定 义 模块 
然后 修改 一 下 on404 处 理 函 数 ， 如 【范例 22-5】 所 示 。 

【范例 22-5 让 Web 服务 器 智能 处 理 404 错误 2】 


Var on404 = function(req,res){ 

2 fs.readFile("server/404.html", “utf-8", function (err, file) { 

// 用 内 置 fs 对 象 读 取 文 件 
| res.writeHead(404, {'Content-Type': 'text/html'}); // 设 置 文 件 头 信息 
4. res.write(file 
5 .replace(/<!--{url}j-->/g,req.ur1) // 通 过 替换 的 方式 把 请 求 网 址 显示 出 来 
6 .replace(/<!--{msg}-->/g,msgOf404[1l+parseInt (Math.random()*3)]) 

// 通 过 替换 方式 随机 显示 1 条 名 言 


又 ，"utf-8"); // 用 utf-8 编码 输出 ， 这 是 为 了 和 前 面 readFile 时 的 编码 一 致 
8. res.end(); // 结 束 输出 

9. I 

1 


【范例 22-5】 运 行 效果 如 图 22-10 所 示 ， 其 中 为 了 避免 中 文 乱码 问题 ， 统 一 把 编码 设置 
为 utf-8， 包 括 404.html 文件 的 编码 格式 。 下 面 来 看 一 下 404.html 的 HTML 代码 又 是 怎样 
的 ， 如 下 所 示 。 


注意 : 服务 需要 用 到 的 22-5.json 文件 和 server/404.html 必须 在 当前 运行 的 服务 的 同一 路 
径 下 ， 否 则 执行 node 命令 时 可 能 提示 找 不 到 文件 。 


【404 文件 的 HTML 代码 】 
下 <!DOCTYPE html> 
2 <html> 
3。 <head> 
4. <title>404 not found!</title> 
5。 </head> 
Ge <body> 
2 <h1>404 not found!</h1> 
8. <p> 
9, 对 不 起 ! 没有 找到 你 请 求 的 路 径 !<br /> 
主人 < <!--{url}--><br /><br /> 
和 <!--{msg}--><br /> 
2 </p> 
3 <a href="/"> 返 回首 页 </a> 
14. </body> 
15s </html> 
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404 not found! 
对 不 起 ! 没有 找到 你 请 求 的 路 径 ! 
/test 


设计 是 一 个 发 现 问题 的 过 程 ， 而 不 是 发 现 解决 方案 的 过 程 一 一 


Leslie Chicoine 


返回 首页 





图 22-10 智能 的 404 错误 页 面 


22.3.2 文件 格式 MIME 协议 


MIME 的 英文 全 称 是 Multipurpose Internet Mail Extensions， 即 多 功能 Internet 邮件 扩充 协 
议 。 

在 早期 的 HTTP 协议 中 ， 并 没有 附加 的 数据 类 型 信息 ， 所 有 传送 的 数据 都 被 客户 程序 解 
释 为 超 文本 标记 语言 HTML 文档 ， 而 为 了 支持 多 媒体 数据 类 型 ，HTTP 协议 中 就 使 用 了 附加 
在 文档 之 前 的 MIME 数据 类 型 信息 来 标识 数据 类 型 。 

每 个 MIME 类 型 都 由 两 部 分 组 成 ， 前 面 是 数据 的 大 类 别 ， 例 如 文本 text) 、 声 音 
(audio) 、 图 像 (image) 等 ， 后 面 定义 具体 的 种 类 。 

文件 类 型 的 种 类 很 多 ， 常 见 的 有 : 


e ”text/plain 一 一 普通 文本 。 

e text/html 一 一 超 文本 标记 语言 文本 。 

e image/png 一 一 PNG 图 像 。 

e image/gif 一 一 GIF 图 形 。 

e image/jpeg 一 一 JPEG 图 形 。 

e video/mpeg 一 一 MPEG 文件 。 

® video/x-msvideo 一 一 AVI 文 件 。 

® application/iphone-package-archive 一 一 IPA 文件 (IOS 系统 ) 。 

® application/vnd.android.package-archive 一 一 APK 文件 ( 安 卓 系统 ) 。 


IANA (The Internet Assigned Numbers Authority， 互 联网 数字 分 配 机 构 ) 是 负责 协调 使 
Internet 正常 运作 事务 的 机 构 ， 是 全 球 最 早 的 Internet 机 构 之 一 ， 其 历史 可 以 追溯 到 1970 年 。 

确认 标准 的 MIME 类 型 也 是 IANA 的 工作 之 一 ， 但 是 很 多 应 用 程序 等 不 及 IANA 来 确认 ， 
因此 它们 使 用 在 类 别 中 以 x- 开 头 的 方法 标识 这 个 类 别 还 没有 成 为 标准 ， 如 x-gzip、x-tar、x-ms- 
wmyv 等 。 事 实 上 ， 这 些 类 型 运用 得 很 广泛 ， 已 经 成 为 事实 性 标准 〈 相 对 于 规范 性 标准 ) 。 只 要 
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客户 端 和 服务 器 共同 承认 这 个 MIME 类 型 ， 即 使 它 是 不 标准 的 类 型 也 没有 关系 。 

这 也 是 很 多 自 定 义 的 MIME 类 型 和 文件 后 级 的 原因 。 在 系统 没有 注册 特定 MIME 信息 
时 ， 系 统 会 提示 未 知 的 文件 类 型 ， 让 用 户 选择 打开 的 应 用 程序 。 由 于 MIME 类 型 与 文档 的 后 
级 相关 ， 因 此 服务 器 使 用 文档 的 后 级 来 区 分 不 同文 件 的 MIME 类 型 ， 服 务 器 中 必须 定义 文档 
后 级 和 MIME 类 型 之 间 的 对 应 关系 。 图 22-11 就 是 当 我 们 试图 打开 未 知 注册 MIME 文件 类 型 
时 Windows 给 出 的 提示 和 选择 。 
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其 它 位 轩 a 国 上 一 Do 
区 型 73F 文件 修改 日 期 :2013-06-25 20:30 大 小 : 0 李 节 


图 22-11 打开 未 知 文件 类 型 时 的 提示 
图 22-12 是 在 文件 夹 上 单 击 “ 菜 单 ” 工 具 ， 选 择 “ 文 件 夹 选项 ”看 到 的 当前 系统 已 注册 


的 文件 类 型 。 如 果 我 们 把 扩展 名 为 z3f 的 文件 注册 成 文本 类 型 ， 就 可 以 用 记事 本 软件 打开 该 
文件 了 。 
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图 22-12 已 注册 的 文件 类 型 
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有 效 的 类 有 text、image、audio、video、applications、multipart 和 message。 注 意 ， 任 
园 


ET 何 一 个 二 进 制 附件 都 应 该 被 叫 作 application/octet-stream。 


22.3.3 响应 不 同类 型 的 文件 


前 面 的 例子 中 只 涉及 一 个 静态 html 文件 ， 即 使 是 404 页 面 也 会 包含 很 多 css、js 和 图 片 
文件 ， 接 下 来 还 需要 给 Web 服务 器 增加 响应 不 同类 型 文件 的 功能 。 

根据 前 面 学 到 的 知识 ， 要 支持 不 同类 型 的 文件 ， 需 要 一 张 MIME 协议 配置 表 。JIS 服务 
器 里 遇 到 未 知 的 文件 类 型 也 需要 手动 添加 配置 ，Nginx 也 是 如 此 。 下 面 通过 图 22-13 和 图 
22-14 看 一 下 。 
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图 22-14 Nginx Windows 版 本 的 MIME 配置 
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下 面 就 是 为 node.js 静态 服务 器 准备 的 MIME 映射 表 ， 更 多 的 文件 类 型 可 以 参考 其 他 服 


{ 
ste toxt/plalnw 
Hoss Egrt /Oss 
"htm": "text/html", 
wtminy “eoext/html™, 
"gif": "image/gif", 
"icon: "image/x-icon", 
"jpeg": "image/jpeg", 
"jpg": "image/jpeg", 


"js": "text/javascript", 





"json "application/json", 

"pdf": "application/pdf", 

"png": "image/png", 

"svg": "image/svg+xml", 

"swf": "application/x-shockwave-flash", 
"tiff";: "image/tiff", 

"wav": "audio/x-wav", 

"wma": "audio/x-ms-wma", 

"wmv" : "video/x-ms-wmv", 

mxml we WEOxt/zml™ 


} 
将 它 保 存 为 一 个 json 配置 文件 ， 然 后 引用 这 个 文件 就 可 以 在 代码 中 方便 地 使 用 。 
Var MIME = require('./22-6.MIME.json'); //require 引用 自 定义 模块 


下 面 定义 方法 onFiles 来 处 理 客户 端 对 不 同 路 径 的 不 同类 型 文件 的 请 求 ， 如 【范例 22-6】 
所 示 。 


【范例 22-6 处 理 不 同类 型 的 文件 】 


和 Var onFiles = function(req,res){ 

2 var pathname = url.parse (req.url) .pathname; // 把 请 求 网 址 交 给 url 对 象 处 理 
3 pathname = path.normalize (pathname.replace(/\.\./g, "")); // 处 理 父 路 径 
2 if (pathname==="\\") { // 如 果 是 根 目录 就 用 设置 的 默认 首页 

略语 Pathname = cfg.index; 

而 了 

var filepath = cfg.roott+pathname; // 找 到 真实 地 址 

8 . path.exists (filepath, function (exists){ // 检 查 是 否 存在 该 文件 

9. if(!exists){ 

10. on404 (req, res); // 如 果 不 存在 就 提示 404 

> }else{ 

2 fs.readFile (filepath, "binary", function (err, file) { // 读 取 文 件 


407 


1 if(err){ // 如 果 读 取 过 程 失败 则 返回 500 服务 端 程序 错误 


14. res.writeHead(500, {"Content-Type":"text/plain"}); 
5 res.end (err) 7 
6 return; 
Es 上 
8 var ext = path.extname (filepath) // 获 取 文 件 后 级 
hE ext = ext ? ext.slice(1) : 'unknown'; 
// 对 于 没有 后 缀 的 当 作 未 知 文件 
Ai 证 Var contentType =MIME [ext]||"application/octet-stream"; 
// 对 没 定义 的 当 作 二 进 制 处 理 
之 res.writeHead(200, {"Content-Type":contentType}); 
2 res.write(file,"binary"); 
从 95 res.end(); 
24. ]}) 7 
252 } 
26. 3 
Zh 


在 范例 中 使 用 了 一 个 cfg.index 的 值 ，cfg 是 另外 定义 的 一 个 服务 器 配置 文件 ， 一 个 服务 
器 总 是 有 很 多 参数 配置 的 ， 比 如 默认 首页 、 默 认 的 主 目录 等 。 这 个 配置 文件 非常 简单 ， 其 内 
容 如 下 : 

exports.root = "webroot/"; // 主 目录 

exports.index = "index.html"; // 默 认 主页 


这 个 配置 保存 为 一 个 js 文件 ， 同 样 可 以 用 require 引用 : 

var cfg = require('./22-6.config.js'); //require 引用 自 定义 模块 

这 样 【 范 例 22-6】 就 可 以 指定 默认 首页 和 根 目 录 ， 其 中 的 on404 方法 在 前 面 已 编写 过 ， 
然后 在 createServer 回调 方法 里 简单 调用 一 下 即 可 。 


http.createServer (function (req, res) { 
onFiles (req, res); 
由 ESD 


第 3 章 中 写 过 一 个 照片 展示 的 范例 ， 基 本 上 是 静态 文件 ， 这 里 修改 一 下 配置 就 可 以 用 来 
检测 一 下 服务 器 是 否 工 作 正 常 。 


exports.root = "../03/" 
exports.index = "3-1.html" 


打开 firebug， 可 以 看 到 一 般 服 务 器 都 会 在 响应 头 信息 里 显示 一 个 Server 信息 ， 比 如 


nginx 会 显示 : Server:nginx/1.5.1 (版 本 号 ) 。 我 们 也 来 给 自己 的 服务 器 加 上 一 个 标识 ， 只 需 
要 在 onFiles 函数 前 添加 如 下 的 语句 : 
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res.setHeader ("Server","z3f nodejs web server/0.1") 


如 果 能 够 看 到 如 图 22-15 所 示 的 画面 ， 那 么 就 成 功 了 。 


a 
文件 四 编 缉 四 | 查看 多 历史 名 ) 书签 @) 工具 部 帮助 加 

照片 展示 + 

Blocabost 9527 ”会 回 -c|| 贺 -55 是 会 ~ 


医 J] 
b | 











夜 * 北 京 PS BY Z3F 
崇 呈 《2 肆 | | ,css 胸 本 pox | 网络 1'| | Bee 
sw | 精 除 保持 | 所 有 HIL CSS JS XHR 图 片 Flash 媒体 
up 人 在 鼻 大 小 时 间 纺 = 
GET oe lecahost9527 4226 
头 信 息 ” 驳 让 误 存 HTML 





网 库 火 信息 


Connection 
Content-Type 





Transfer-Encoding 


Serve aarverlo 上 
ol | i 


图 22-15 用 nodejs 写 的 最 简单 Web 服务 器 











22.4 处 理 文 件 上 传 


分 享 是 满足 人 们 精神 的 一 种 重要 方式 ， 人 们 在 分 享 中 享受 快乐 、 传 播 信息 、 学 习 知 识 。 
互联 网 最 重要 的 一 种 功能 就 是 分 享 ，Web 应 用 中 对 分 享 的 一 种 实现 就 是 上 传 文件 ， 无 论 是 图 
片 、 文 本 还 是 视频 、 音 乐 。 


22.4.1 安装 并 使 用 Node.js 第 三 方 模块 


Nodejs 有 相当 多 的 开源 模块 (或 者 叫 插件 ) ， 在 实际 项 目 中 ， 很 多 时 候 需要 赶 时 间或 是 
没有 能 力 或 者 精力 去 造 轮子 时 就 需要 借助 别人 的 力量 ， 在 无 法 保证 功能 安全 性 和 完整 性 时 最 佳 
的 选择 就 是 选择 成 熟 的 第 三 方 产品 。 在 Nodejs 中 如 何 使 用 一 个 第 三 方 模块 来 完成 任务 呢 ? 

首先 ， 根 据 需 求 选择 相应 的 模块 ， 比 如 现在 的 任务 是 要 做 一 个 上 传 文件 的 功能 ， 以 上 传 
图 片 为 例 ，HTTP 协议 中 对 POST 的 定义 相当 多 ，formidable 模块 封装 了 对 form 表单 操作 的 
各 种 功能 ， 它 是 github 开源 项 目 社区 中 口碑 很 棒 的 模块 。 下 面 通过 图 22-16 来 看 看 它 的 安装 。 


409 


Jsershdninistratorycd C:\Program Piles\mnodejs 


Progran Fi 








图 22-16 安装 node-formidable 模块 


在 使 用 第 三 方 模块 时 ，npm 会 给 出 一 些 和 警告 ， 比 如 对 node 引擎 的 最 低 需 求 是 6.8.0 版 ， 
如 果 本 地 安装 的 是 6.6.21 版 ， 怎 么 办 呢 ? 选择 一 个 低 版 本 一 一 指定 版 本 号 时 只 需要 在 后 面 追 
加 “@ 版 本 号 ” 即 可 ， 敲 入 npm install formidable@1.1.0 回 车 。 在 某 些 时 候 或 因 网 络 原因 或 因 
npm 远程 服务 器 升级 等 意外 情况 时 npm 可 能 会 运行 不 正常 ， 这 些 不 算是 npm 本 身 问 题 。 

另外 ， 为 了 便于 引用 ， 需 要 设置 一 下 环境 变量 NODE_PATH， 这 是 为 了 编程 时 像 系统 内 
置 横 块 一 样 引用 ， 否 则 可 能 会 提示 模块 无 法 找到 ， 详 情 如 图 22-17 所 示 ， 设 置 之 后 需要 重启 
计算 机 才能 生 交 








ET 7 | 
常规 | 计算 机 名 | 硬件 。 高 级 。 | 自动 更 新 | 远程 | 
ECE 了 区 









Adninistrator 的 用 户 变量 人 


LE 而 a 
CHE [1] 





变量 名 0 
变量 值 O 





系统 变量 GE) 





410 


去 重 

ConSpe 

了 加 JeT 上 
DiE_EATF 








DBER_DF PR， 

os indors) 

Fath Ci MTNDONS\svsten32:C; ‘MIIDOTS: «I| 
新 汗 如 0 | _ 沪 名) | 到 除 避 ) 





Wm 
CAPrograa Files\mwdejs\node mo 





确定 取消 


人 





图 22-17 配置 NODE PATH 环境 变量 











22.4.2 用 node-formidable 处 理 上 传 图 片 


Node 这 个 模块 formidable 可 以 处 理 绝 大 多 数 上 传 业务 ， 其 项 目 在 Github 中 的 地 址 是 
https://github.com/felixge/node-formidable， 上 面 有 最 新 的 API 详 细 参 考 ，【 范 例 22-7】 只 用 了 
其 中 比较 主要 的 几 个 ， 相 对 来 说 比较 简单 ， 整 合 前 面 的 代码 ， 此 处 列 出 了 全 部 代码 和 注释 ， 
以 便 了 解 其 具体 实现 。 


【范例 22-7 用 node-formidable 处 理 上 传 图 片 】 


卫 var http = require('http'); //require 引用 内 置 模块 http 
2 var Url = require('url'); //require 引用 内 置 模块 url 
3 var fs = require('fs'); //require 引用 内 置 模块 fs 
Yh var path = require('path'); //require 引用 内 置 模块 path 
5. var msg0f404 = require('./22-5.json');  //require 引用 自 定义 模块 
6. var MIME = require('./22-8.MIME.json'); //require 引用 自 定 义 模块 
7 var cfg = require('./22-11.config.js'); //require 引用 自 定义 模块 
5 var formidable = require('formidable'); //require 引用 第 三 方 模块 
95 var on404 = function (reqv res){ 
LO fs.readFile ("server/404.html", "utf-8", function (err, file) { 
// 用 内 置 fs 对 象 读 取 文 件 
汪 res.writeHead(404，{'Content-Type': 'text/html'});// 设 置 文件 头 信息 
2 res.writel(file 
13. .replace (/<!--{url}-->/g,req.url) // 通 过 替换 的 方式 把 请 求 网 址 显示 出 来 
14. .replace(/<!--{msg}-->/g,msgOf404[1l+parseInt (Math.random()*3)]) 
// 通 过 替换 随机 显示 一 条 名 言 
15. ，"utf-8"); // 用 utf-8 编码 输出 ， 这 是 为 了 和 前 面 readFile 的 编码 一 致 
16. res.end(); // 结 束 输出 
1 Da 
18. ] 
9 var upload = function(req,res){ 
a0s Var form = new formidable.IncomingForm() 
2 var fields=[],files=[],fieldsDATA={},filesDATA={} 
2 form.uploadDir = cfg.root; // 指 定 目 录 
2 form. keepExtensions=true; / /保持 上 传 文件 的 后 级 
24. form.maxFieldsSize = 2 * 1024 * 1024;  // 最 大 限制 2MB 
253 form.on('field', function(field, value) { // 监 听 有 内 容 时 
26. fields.push([field, value]); // 获 取 表单 字段 信息 
2 }) 
28. .on('file', function(field, file) { // 监 昕 有 上 传 文件 时 
9 files.push([field, file]); // 获 取 表 单 上 传 文件 信息 
30% }) 
IT .on('end', function() { // 监 听 完 成 时 
DR console.10g('-> upload done'); // 控 制 台 输出 提示 ， 可 去 掉 
33-。 for (var i=0; i<fields.length;i++){ 
34 fieldsDATA[fields[i][0]] = fields[i][1]; 
// 数 组 转 对 象 
DD } 
36。 for (var i=0; i<files.length;i++){ 
375 filesDATA[files[i][0]]=files[i][1];// 数 组 转 对 象 
38 . } 
39s var oldf = filesDATA.upfile.path; 
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40. var newf = oldf.replace(/(\w+)\./,"z3f.").replace 
MOA Dn 





41. fs .renameSync (oldf, newf); // 异 步 修 改 文件 名 
42. res.writeHead(200, {'content-type': 'text/html'}); 
43. res.write('TEMP Name:'+oldf+'<br />'); 
44. res.write('NEW Name:'+newf+'<br />'); 
CE res.write('<br /><img src="'+newf.substr(newf. 
lastIndexOf (~/"))+'"/>'); 
46. res.end('ok'); 
47. a 
48. form.parse (req); // 主 要 方法 
49. x 
S05 Var onFiles = function(req,res)t{ 
Se var pathname = url.parse (req.url) .pathname; // 把 请 求 网 址 交 给 url 对 象 处 理 
52. Pathname = path.normalize (pathname.replace(/\.\./g, "")); 
// 处 理 父 路 径 
53. if (pathname==="\\"){ // 如 果 是 根 目录 就 用 设置 的 默认 首页 
54. Pathname = cfg.index; 
5 
56. if (pathname==="\\upload" && req.method.toLowerCase() == 'post'){ 
5 upload (req, res); 
585 return; 
S93 } 
60. var filepath = cfg.root+pathname7 // 找 到 真实 地 址 
61. Path.exists (filepath, function(exists){ // 检 查 是 否 存 在 该 文件 
62a if(!exists){ 
63. on404 (req, res); // 如 果 不 存在 就 提示 404 
64. }elsef 
65. fs.readFile (filepath, "binary", function (err, file) {// 读 取 文 件 
66. if (err){ // 如 果 读 取 过 程 失败 则 返回 500 服务 端 程序 错误 
67. res .writeHead(500, {"Content-Type": 
"text/plain"}); 
68. res.end (err) 7 
69% return; 
70, } 
a var ext = path.extname (filepath); // 获 取 文 件 后 缀 
了 2 ext = ext ? ext.slice(1) : "unknown'7 
// 去 点 ， 对 于 没有 后 级 的 当 作 未 知 文件 
Ss Var contentType = MIME[ext]||"application/octet- 
stream"; // 对 没 定义 的 当 作 二 进 制 处 理 
74. res.writeHead(200, {"Content-Type":contentType}); 
os res.write (file,"binary"); 
76. res.end(); // 完 成 输出 ， 结 束 对 浏览 器 的 输出 
3737, 1); 
了 78 1 
79- ]) 7 
80. 3}; 
BT。 http.createServer (function (req, res) { 
32 res.setHeader ("Server","z3f nodejs web server/0.1"); 
835 onFiles (req,res); 
84. DiSEea(9527 27 0 OT // 绑 定 IP 和 端口 


85. console.1log('Server running at http://127.0.0.1:9527/');// 控 制 台 输 出 提示 
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运行 效果 如 图 22-18 所 示 ， 其 中 22-7.configjs 的 配置 如 下 : 


exports.root = "webroot/" 
exports.index = "upload.html" 





和 
文件 四 ”编辑 个 查看 WW) 历史 GG) 书签 @) 工具 中 帮助 0D 
| 五 http:/leeahost:952T/eplosd + 


各 locubhost 5 四 -cj 疾 - BE 月 会 于 


TENP Name:webroot\58cde92f331d307f2411dae499aacfb4. png 
NEW Name:webroot/z3f. png 





ok 





图 22-18 用 node-formidable 处 理 上 传 图 片 


而 upload.html 的 代码 也 很 简单 ，body 标签 中 主要 是 : 


<form method="post" action="/upload" enctype="multipart/form-data"> 
选择 文件 : <input type="file" name="upfile" /><input type="submit" 
value=" 上 传 " /><br /><br /> 

</form> 


22.5 相关 参考 


@ RingoJS 是 一 个 用 Java 编写 的 JavaScript 宿主 环境 ， 基 于 Mozilla 的 Rhino 的 
JavaScript 引擎 ， 可 用 来 开发 Web 应 用 程序 ， 网 址 是 https://ringojs.org/。 

e@ MongoDB 是 一 个 基于 分 布 式 文件 存储 的 数据 库 ， 旨 在 为 Web 应 用 提供 可 扩展 的 高 性 
能 数据 存储 解决 方案 ， 是 一 个 介 于 关系 数据 库 和 非 关 系数 据 库 之 间 的 产品 ， 它 支持 的 
数据 结构 非常 松散 ， 是 类 似 json 的 bson 格式 ， 因 此 可 以 存储 比较 复杂 的 数据 类 型 ， 
它 用 JavaScript 做 shell， 网 址 是 https://www.mongodb.com/。 

e Node.js 官网 提供 在 线 API， 本 书 所 有 内 置 模块 对 象 的 详细 说 明 均 可 在 上 面 查阅 到 ， 网 
址 是 https://nodejs.org/api/。 

@ Node.js 的 仿 内 置 模块 API 的 网 址 是 https://nodejs.org/api/fs.html。 

@ 范例 中 req 和 res 由 内 置 模块 http 提供 ，API 地 址 是 https://nodejs.org/api/http.html。 
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第 23 章 基于 Express 框架 的 HTTP 服务 器 


让 开发 人 员 在 新 的 平台 上 自如 使 用 新 的 语法 ! 
一 一 Express 作者 TJ Holowaychuk 


Express 现在 非常 流行 ， 它 是 一 个 简洁 而 灵活 的 nodejs Web 应 用 框架 ， 提 供 一 系列 强大 
特性 帮助 创建 各 种 Web 应 用 。 
本 章 主要 知识 点 : 


。 中 间 件 
@ 路 由 
。 请 求 与 响应 


23.1 引入 Express 框架 


这 里 所 说 的 Express 是 指 Nodejs 环境 下 的 一 个 组 件 或 插件 ， 除 此 之 外 ， 它 还 是 一 种 规范 
化 的 信息 模型 语言 ， 很 多 软件 还 有 Express 版 本 ， 如 Microsoft Visual Studio Express 2012 for 
Web。 

第 22 章 讲述 了 Nodejs 搭建 服务 器 的 内 容 ， 那 只 是 搭建 了 一 个 非常 简单 的 Web 服务 器 。 
Express 也 是 用 于 搭建 Web 服务 器 的 工具 ， 但 Express 能 够 做 更 多 的 事情 。 


23.1.1 Express 与 Connect 


Express 


TJ Holowaychuk 常 被 称 为 TJ， 在 Github 上 
的 排名 甚至 高 于 jQuery 的 作者 John Resig。 
Express 是 TJ 开发 的 一 套 web application 
framework for node， 即 基于 Node 的 Web 应 用 框 用 ET 
架 ， 其 模型 如 图 23-1 所 示 。 Response Extension 

说 到 Express 时 不 得 不 提 到 Connect， 其 中 
一 个 原因 是 它们 的 作者 都 是 同一 个 人 ， 另 一 个 图 23-1 Express 模型 


Engine Framework 





原因 是 Express 利用 了 Connect 中 间 件 框架 ， 整 合 了 一 些 适合 于 Web 应 用 中 需要 的 东西 ， 具 
体 来 说 ，Express 提供 了 


e@ 强大 的 路 由 

e 视图 系统 

®。 基于 环境 的 配置 

ee 基于 持久 会 话 

e 内 容 协商 

日 响应 工具 

@ 重 定向 工具 

。 能 快速 生成 应 用 骨架 的 功能 


23.1.2 在 Node.js 环境 下 安装 Express 


接 下 来 先 介绍 如 何 安装 Express 环境 ， 安 装 Nodejs 之 后 会 在 开始 菜单 中 创建 一 个 
Node.js command prompt 的 批 处 理 快捷 方式 。 

切换 到 你 需 直下 目录 (这 里 我 们 假设 读者 已 经 创建 好 了 一 个 项 目 文件 夹 G: 
\node) ， 运 行 命令 npm install -g express (Express 4 版 本 以 前 使 用 这 个 命令 ) ， 如 图 23-2 所 
示 。 如 果 是 安装 Be 4 以 后 版 本 ， 则 使 用 命令 npm install -g express -generator。 安 装 完成 
后 可 以 使 用 express -v 命令 查看 版 本 。 


而 管理 员 : Nodej command prompt 





environnent has been set up for using Node.js 8.9.3 Cx64) and npm. 


sadninistratorynpn -uv 


trator)gs 


jenerator 
aiigsipnvexpress -》C: lsersNdninistrat 国 | 


:nodeyexpress 下 


Toptions] rair] 




















23-2 安装 Express 
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提醒 : Express 和 Express 项 目 生成 器 不 是 一 个 概念 ， 在 Express 4 版 本 以 前 ， 两 者 统一 在 
起 ， 所 以 安装 Express 会 自动 全 部 安装 ， 但 从 4 版 本 开始 ， 两 者 分 开 了 ， 所 以 必须 要 添加 
-generator 参数 来 安装 Express 项 目 生成 器 。 
对 于 大 多 数 计算 机 来 说 ， 都 可 能 安装 了 很 多 软件 ， 复 杂 的 环境 可 能 导致 配置 出 错 ， 这 时 
建议 在 虚拟 机 中 处 理 。 


23.1.3 用 Express 搭建 简单 Web 应 用 


用 Express 搭建 Web 应 用 是 相当 快速 的 ， 正 如 它 的 名 字 一 般 ， 这 也 是 前 面 所 说 的 : 能 快 
速生 成 应 用 骨架 。 

安装 Express 成 功 之 后 ， 键 入 命令 express -e mysite， 就 会 创建 一 个 名 为 mysite 的 Web 应 
用 项 目的 文件 骨架 ， 如 图 23-3 所 示 。 





图 23-3 创建 Web 应 用 骨架 


做 到 这 里 其 实 还 并 未 完成 ， 一 些 项 目 依 赖 的 组 件 还 没有 安装 完成 ， 根 据 提 示 ， 需 要 切换 
到 mysite 目录 中 ， 并 且 还 要 运行 命令 npm install， 显 示 如 图 23-4 所 示 的 结果 才 算 大 功 告 成 。 
国 管理 员 ; Nodejs command prompt 玫 (=.5 





:nodeyca nysite 


de nysitexnpn install 
created a lockfile as package—lock.json. You should connit this file. 


:node nysite> 








图 23-4 Express Web 项 目 搭建 完成 
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至 此 ， 项 目 就 搭建 完成 ， 还 需要 启动 ， 图 23-3 中 有 提示 ， 在 项 目 mysite 的 根 目录 

， 用 命令 npm start 即 可 启 0 最 终 在 浏览 器 中 就 可 以 访问 ， 如 图 23-5 所 示 。 当 用 浏览 
A 个 界面 时 ， 服 务 器 端 (这 就 是 cmd 窗口 ) 还 有 一 些 控制 台 输 出 ， 如 图 23-6 所 示 。 

提示 : 读者 一 定好 奇 这 个 端口 3000 是 如 何 配置 的 呢 ? 在 使 用 node start 命令 后 ， 会 出 现 
“.bin/www” 的 提示 ， 这 个 www 就 是 项 目的 配置 文件 ， 里 面 端口 的 默认 设置 是 3000。 

现在 再 回头 来 看 一 下 Express 创建 的 文件 结构 (如 图 23-7 所 示 ) ， 除 node_modules 是 系 
统 需要 的 以 外 ， 其 他 的 目录 和 文件 都 不 多 ， 有 具体 如 表 23-1 所 示 。 























[=e [ol 记 
BE npm Express x -一 一 一 | 
矣 :oae wysiteynp 
拓 GC © localhost 跟 …t»》 三 
> nysite@0.0.0 start G:\node\nysite 
> node ./bin/wuw 
/ 200 20.688 ms - 297 
/stylesheets/style 
- 836 
Express 
60 2.515 ms — 111 
ns — 836 Welcome to Express 
/stylesheets/style.css 299 8.896 ms - 111 
gc 
图 23-$ Express Web 项 目 运行 效果 图 23-6 Express 服务 端 运行 时 


bin 
node_ modules 


public 


routes 
views 

加 :ppjs 
packagejson 


package-lockjson 








图 23-7 Express Web 项 目 目录 结构 


表 23-1 Express 创建 的 默认 文件 结构 
































文件 /目录 说 明 
npm 依赖 配置 文件 ， 类 似 ruby 中 的 Gemfile、java Maven 中 的 pom.xml、ASP.NET 
Puese dso 中 的 web.config 文 件 
appjs 项 目的 入 口 文件 ， 类 似 index.php 
/public/ 静态 文件 目录 
/views/ 视图 (模板 〉 程序 文件 目录 
/routes/ 路 由 控制 器 程序 文件 目录 
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23.2 Express 的 程序 控制 


前 面 熟悉 了 Express 的 文件 结构 ， 下 面 看 看 Express 的 源 代 码 。Express 提供 了 一 系列 用 
于 搭建 Web 应 用 程序 的 API。 表 23-2 列举 了 Express 提供 的 一 些 API， 其 中 模板 引擎 和 中 间 
件 是 实际 项 目 中 比较 重要 的 。 





表 23-2 Express 相关 API 











方法 或 属性 说 明 
set(name, value) 将 设置 项 name 的 值 设 为 value 
get(name) 获取 设置 项 name 的 值 


将 设置 项 name 的 值 设 为 tue 

将 设置 项 name 的 值 设 为 false 

检查 设置 项 name 是 否 已 启用 ， 返 回 true 或 fasle 

检查 设置 项 name 是 否 已 禁用 ， 返 回 tue 或 fasle 

使 用 中 间 件 function， 可 选 参数 path 默认 为 “/” 

注册 模板 引擎 callback 用 来 处 理 ext 扩 展 名 的 文件 

泻 染 view 模板 ，callback 用 来 处 理 返回 的 泻 染 后 的 字符 串 
在 给 定 的 主机 和 端口 上 监听 请 求 ， 和 node 的 http.Server#isten0 一 致 
路 由 参数 的 处 理 

匹配 所 有 的 HTTP 动作 的 路 由 处 理 

应 用 程序 级 数据 对 象 

Express 的 一 些 可 配 设置 








app.all(path, [callback...], callback) 匹配 所 有 的 HTTP 动作 
app.get(path, [callback...], callback) 匹配 GET 请 求 
app.post(path, [callback...], callback) | 匹配 POST 请 求 





23.2.1 模板 引擎 ejs 


心 w N 


玉 
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打 玫 





F 项 目 mysite 根 目录 的 appjs 文件 ， 可 以 看 到 它 的 代码 很 简洁 ， 如 【范例 23-1】 所 示 。 


【范例 23-1 app.js 全 部 代码 】 
Var express = require ('express')7 
var path = require('path'); 


Var favicon = require('serve-favicon'); 


Var logger = require('morgan'); 





5. var cookieParser = require('cookie-parser'); 
6. var bodyParser = require('body-parser'); 


8. var index = require('./routes/index'); 


ll 


9. var users require('./routes/users'); 


11. var app = express(); 


13. // view engine setup 
14. app.set('views', path.join( dirname, 'views')); 
15. app.set('view engine', 'ejs'); 


17. // uncomment after placing your favicon in /public 

18. //app.use(favicon(path.join( dirname, 'public', 'favicon.ico'))); 
19. app.use (logger('dev')); 

20. app.use (bodyParser.json()); 

21. app.use (bodyParser.urlencoded({ extended: false })); 

22. app.use (cookieParser()); 

23. app.use (express.static(path.join(_ dirname, 'public'))); 


25. app.use('/', index); 
26. app.use('/users', users); 


28. // catch 404 and forward to error handler 
29. app.use (function(req, res, next) { 

了 305 Var err = new Error('Not Found'); 

cy err.status = 404; 


32%。 next (err); 
335 1 
34. 


35. // error handler 
36. app.use (function(err, req, res, next) { 


co // set locals, only providing error in development 

38- res.locals.message = err.message7 

39-。 res.locals.error = req.app.get('env') === 'development' ? err : {}; 
40. 

41. // render the error page 

42. res.status (err.status || 500); 

43. res.render('error'); 

aas I) 

45. 


46. module.exports = app; 


在 最 前 面 用 require 方法 调用 的 一 般 是 依赖 或 者 独立 抽象 出 来 的 代码 ， 像 C# 中 的 using、 
JSP 中 的 include、PHP 和 Java 中 的 import 等 。 


419 


第 1 行 引用 Express 框架 ， 这 里 可 能 有 读者 会 疑惑 ， 为 什么 还 要 引用 ? 因为 Express 虽然 
是 一 个 Web 框架 ， 但 依然 基于 Node， 所 以 Express 是 Node 的 一 个 组 件 ， 而 app.js 里 的 代码 
也 只 是 利用 这 些 组 件 完成 实际 的 项 目 需求 。 

第 2 行 和 第 9 行 是 项 目 文件 ， 即 不 同 的 项 目 有 不 同 的 文件 。 

第 11 行 实例 化 Express 后 通过 第 14~15 行 设置 一 些 参 数 ， 也 就 是 修改 settings 对 象 的 
值 ，settings 大 致 有 如 下 一 些 值 : 


e@ env 运 行 时 环境 ， 默 认为 process.env.NODE_ENYV 或 者 "development"。 

@ ”trust proxy 激活 反 向 代理 ， 默 认 未 激活 状态 。 

e@ jsonp callback name 修改 默认 ?callback= 的 jsonp 回调 的 名 字 。 

e json replacerJSON replacer 蔡 换 时 的 回调 ， 默 认为 null。 

® json spaces JSON 响应 的 空格 数量 ， 开 发 环境 下 是 2， 生产 环境 下 是 0。 

@ case sensitive routing 路 由 的 大 小 写 敏感 ， 默 认 是 关闭 状态 ，"/Foo" 和 "foo" 是 一 样 的 。 
@ strictrouting 路 由 的 严格 格式 ， 默 认 情 况 下 "foo" 和 "/foo/" 是 被 同样 对 待 的 。 

eview cache 模板 缓存 ， 在 生产 环境 中 是 默认 开启 的 。 

e view engine 模板 引擎 。 

e@ views 模板 的 目录 。 


其 中 app.set(view engine', 'ejs') 就 是 设置 默认 的 模板 解析 引擎 ， 传 统 开发 语言 ， 如 ASP、 
PHP、JSP、ASPNET 等 ， 都 没有 附带 模板 解析 功能 ， 很 多 都 是 由 第 三 方 开 发 ， 就 算 有 也 比较 
爱 肿 ，Express 不 仅 内 置 ， 还 提供 多 种 模板 引擎 ， 可 以 说 绝 大 多 数 JavaScript 网 页 模板 引擎 稍 
加 改造 都 可 以 用 于 Express， 这 是 其 他 网 页 开发 语言 绝对 无 法 媲美 的 优势 。 

Express 默认 使 用 ejs 后 级 的 模板 文件 ， 模 板 目 录 在 views 目录 下 。 一 般 来 说 ， 网 页 设计 
师 或 者 前 端 工程 师 输出 的 文件 基本 上 都 是 html 后 级 格式 的 文件 ， 为 了 减少 转换 ， 只 需要 简单 
配置 一 下 即 可 让 Express 也 能 够 识别 html 格式 的 模板 文件 ， 代 码 如 下 : 


app.set('view engine', ‘'html'); // 设 置 为 html 后 级 
app.engine('.html', require('ejs'). express) /1 引擎 依然 为 ejs 
app.set('view engine', 'z3f'); // 设 置 为 自 定义 文件 后 缀 
app.engine('.2z3f', require('ejs'). express); // 引 擎 依然 为 ejs 


第 19~44 行 引用 Express 提供 的 一 些 中 间 件 ， 第 39 行 是 根据 Node 配置 环境 选择 性 加 载 
中 间 件 ， 默 认 情 况 就 是 development 环境 ， 如 果 要 调试 让 系统 环境 改变 ， 只 需要 在 系统 变量 
里 添加 NODE_ENV 变量 即 可 ， 如 图 23-8 所 示 ， 当 然 ， 修 改 之 后 可 能 需要 重启 操作 系统 。 
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Adninistrator 的 用 户 变量 名 


变量 值 

PATH C: \soft\WPS Office\d. 1.0. 4249\o. ~ 
PYTHONPATH C:\Python27\ 

CVDocaments and Settings\Adnin 
C:\Documents and Settings\hdnin 





TEMP 
TIP 
Ws. 


ON C:\soft\WPS 0ffice\9.1.0.4249\e 


Cw] CR] [可 








系统 变量 仿 ) 





C: \WINDOYS\systen32\cnd. exe 
Wm 


production 





Windows_IT 


asermaest sr wrmoee MM 


新 建 四 | [ 编辑 0 册 B LD 





























[而 定 ][_ 职 消 








图 23-8 设置 Node 所 在 系统 的 环境 变量 


第 25~26 行 是 项 目 代码 ， 根 据 访问 网 址 指向 不 同 的 路 由 处 理 逻 辑 中 去 ， 这 些 代码 都 在 
routes 目录 下 ， 比 较 简单 ， 比 如 routes.index 对 应 /routes/indexjs， 代 码 如 下 : 


Var express = require('express'); 
Var router = express.Router(); 


/* GET home page. */ 
router.get('/', function(req, res, next) { 


res.render('index', { title: 'Express' }); 
1D); 


module.exports = router; 


这 相当 于 数据 ， 对 应 的 模板 文件 为 /views/index.ejs， 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title><%= title %></title> 


<link rel='stylesheet' href='/stylesheets/style.css' /> 
</head> 


<body> 
<h1><%= title gs></h1> 
<p>Welcome to <%= title %></p> 
</body> 
</html> 


通过 图 23-5 的 运行 效果 和 这 些 模板 代码 对 照 可 以 发 现 ， 程 序 中 的 数据 对 象 被 传递 到 模板 
上 被 模板 引擎 解析 。 
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23.2.2 中 间 件 (middleware) 


中 间 件 就 像 流水 线 一 样 ， 对 来 访 的 请 求 进行 层 层 处 理 〈( 如 图 23-9 所 示 ) ， 处 理 完 成 后 又 
交 给 下 一 环节 ， 如 此 循环 。 它 有 些 像 Java 的 过 滤器 、IIS 的 筛选 器 。 











request 






































response 














中 问 起 中 间 秆 中 间 千 
图 23-9 中 间 件 流程 


在 程序 代码 中 ， 哪 些 是 中 间 件 呢 ? 一 个 简单 的 识别 标志 就 是 app.use0)， 通 过 这 个 方法 调 
用 的 大 多 都 是 中 间 件 。 
下 面 通过 一 个 简单 的 例子 来 理解 中 间 件 及 其 用 途 ， 以 IP 禁止 为 例 ， 要 禁止 某 些 IP 不 能 
访问 本 站 这 样 一 个 中 间 件 ， 其 代码 非常 简单 ， 如 下 所 示 : 
module.exports = function(req, res, next){ 
Var tips = ("127.0.0.L "L92168.0.52] 
if(ips.indexOf (req.connection.remoteAddress)>-1){ 
res.end('STOP'); 
}else{ 
next (); 
} 
] 
逻辑 很 简单 ， 如 果 客 户 端 IP 在 黑 名 单 里 ， 则 通过 res.end0 终 止 程序 的 运行 ， 否 则 用 nextO 
方法 继续 到 下 一 个 中 间 件 ， 通 过 图 23-9 可 知 ，nextO) 是 很 重要 的 方法 ， 没 有 它 就 无 法 进入 下 
-个 中 间 件 。 
将 代码 保存 到 middleware/bannedIPjs， 在 app.js 中 用 两 行 代码 来 调用 : 


var bannedIP = require('./middleware/bannedIP'); 


app.use (bannedIP) 


启动 网 站 ， 或 者 重启 ， 现 在 ， 分 别 用 两 个 人 P 来 测试 这 个 中 间 件 是 否 有 效 ， 如 图 23-10 所 示 。 
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文件 正 ) 编辑 谍 ) 查看 收 诚 TC 


人 PR- 目 -四国 他 亿 扫 去 收 V& 天 如 


Express 


Welcome to Express of ejs 








图 23-10 自 定义 中 间 件 人 过 滤器 


更 多 的 路 由 规则 写法 请 参考 23.3.1 小 节 的 内 容 。 需 要 注意 的 是 ， 中 间 件 是 流水 线 模式 ， 
即 是 序列 执行 方式 ， 所 以 顺序 不 同 ， 会 导致 处 理 的 优先 级 不 同 ， 即 在 代码 中 ， 将 中 间 件 代码 
位 置 前 移 或 后 移 会 改变 其 优先 顺序 。 


23.3 Express 的 请 求解 析 


从 Web 服务 器 最 基本 的 处 理 流程 来 看 ，HTTP 模块 基于 事件 处 理 网 络 访问 ， 无 外 平 两 部 
分 ， 即 请 求 和 响应 。 本 节 内 容 就 先 来 介绍 Express 对 请 求 的 解析 处 理 。 


23.3.1 路 由 routes 


路 由 又 习惯 上 称 为 URL 映射 ， 基 本 上 都 是 对 URL 的 解析 。URL 是 跟随 HTTP 一 起 的 ， 尤 
为 重要 ， 就 像 门牌 号 ， 没 有 它 就 找 不 到 想 要 的 东西 。 同 样 ， 一 个 构造 清晰 的 URL 路 径 便于 查找 
目的 地 和 识别 ， 甚 至 对 于 SEO 〈Search Engine Optimization， 搜 索引 擎 优化 ) 也 是 非常 重要 的 。 

在 Express 中 主要 用 get、post 和 all 这 3 种 方法 来 处 理 路 由 的 操作 ， 在 项 目 中 routes 目录 
下 存放 的 就 是 一 些 路 由 处 理 逻 辑 代码 。 

Express 提供 的 路 由 格式 主要 有 两 种 : 一 是 纯 字符 串 路 由 ; 二 是 正则 表达 式 路 由 。 


// 纯 字符 匹配 

app.get('/', routes.index); 

app.get('/users', user.list); 

// 正 则 匹配 

app.get (/^\/page\/(\w+) (?:-(\w+))?$/, function(req, res){ 
var from = req.params[0]; 
Var to = req.params[1] || from; 


423 


console,. lL0g(/pages + from + = + to)s 


Ds 
// 分 组 变量 


app.get('/:myvar/:myvar2', function(req,res)t{ 


console.log('myvar: ' + req.params.myvar +'<br />myvar2: ' + 


req.params.myvar2); 
Ds; 


注意 : 每 次 修改 appjs 后 必须 重启 服务 器 。 


分 组 变量 其 实质 依然 是 在 内 部 转换 为 正则 表达 式 ， 所 以 它 还 是 正则 匹配 ， 只 是 Express 
帮助 其 简化 ， 使 之 更 友好 。 其 中 转换 后 的 匹配 正则 可 以 在 req.route 对 象 中 找到 ， 更 多 
Request 方 法 和 属性 如 表 23-3 所 示 。 


表 23-3 Express 提供 的 Request API 





方法 或 属性 
req.params 
req.query 
req.body 
red.files 
req.param(name) 
Teq.route 
req.cookies 
req.get(field) 


req-is(type) 


说 明 

数组 对 象 ， 命 名 过 的 参数 会 以 键 值 对 的 形式 存放 

一 个 解析 过 的 请 求 参 数 对 象 

对 应 的 是 解析 过 的 请 求 表 单 ， 由 bodyParser0 中 间 件 提供 
上 传 的 文件 对 象 ， 由 bodyParser() 中 间 件 提供 

返回 name 参数 的 值 

当前 匹配 的 路 由 里 包含 的 属性 

Cookies 对 象 ， 由 cookieParser() 中 间 件 提供 
获取 请 求 头 里 的 field 的 值 ， 大 小 写 不 敏感 

检查 请 求 的 文件 头 是 不 是 包含 Content-Type 字段 

返回 客户 端 地 址 

当 设置 trust proxy 为 true 时 ， 解 析 X-Forwarded-For 里 的 卫 地 址 列 














ep 表 ， 并 返回 一 个 数组 

ieqpah 返回 请 求 的 URL 的 路 径 名 

id 返回 从 Host 请 求 头 里 获取 的 主机 名 ， 不 包含 端口 号 

req.fresh 判断 请 求 是 不 是 新 的 

人 判断 请 求 头 里 是 否 有 X-Requested-With 这 样 的 字段 并 且 值 为 





XMLHttpRequest 





23.3.2 Request 对 象 


Request 对 象 是 Express 封装 的 一 个 类 似 其 他 Web 编程 语言 中 Request 一 样 的 对 象 ， 甚 至 


~ 
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比 其 他 语言 更 加 灵活 强大 ， 其 优势 就 是 使 用 JavaScript 的 语法 风格 。 
Request 对 象 常常 习惯 缩写 成 req， 并 且 在 中 间 件 (图 23-9) 以 及 最 常见 的 Express 官网 


文档 中 大 多 也 如 此 简单 描述 。 





23.4 Express 的 响应 控制 


服务 器 得 到 了 客户 端的 Request 请 求 后 ， 要 做 的 事情 就 是 对 其 做 出 响应 ， 常 见 的 响应 状 


态 代码 如 下 。 


8 200 OK 一 一 客户 端 请 求 成 功 。 
e@ 400 Bad Request 一 一 客户 端 请 求 有 语法 错误 ， 不 能 被 服务 器 所 理解 。 


一 起 使 用 。 


© © © 9 


401 Unauthorized 一 一 请 求 未 经 授权 ， 这 个 状态 代码 必须 和 WWW-Authenticate 报头 域 


403 Forbidden 一 一 服务 器 收 到 请 求 ， 但 是 拒绝 提供 服务 。 

404 Not Found 一 一 请 求 资源 不 存在 。 

500 Internal Server Error 一 一 服务 器 发 生 不 可 预期 的 错误 。 

503 Server Unavailable 一 一 服务 器 当前 不 能 处 理 客户 端的 请 求 ， 一 段 时 间 后 可 能 恢复 正常 。 


想 了 解 更 多 关于 HTTP 响应 的 信息 ， 请 参考 HTTP 协议 有 关 知 识 ， 这 些 响应 状态 也 可 以 
在 Firebug 浏览 器 工具 中 看 到 。 下 面 通过 表 23-4 预览 一 下 Response 对 象 的 属性 和 方法 。 


方法 或 属性 
res.status(code) 


res.set(field, [value]) 


表 23-4 Express 提供 的 Response API 


返回 指定 响应 状态 


设置 响应 头 字段 field 值 为 value， 也 接受 一 个 对 象 设置 多 个 值 





res.get(field) 


返回 一 个 大 小 写 不 敏感 的 响应 头 里 的 field 的 值 





Tres.cookie(name, value, [options]) 


设置 cookie name 值 为 value， 接 受 字符 串 参 数 或 者 JSON 对 象 





res.clearCookie(name, [options]) 


清除 指定 cookie 





res.redirect([status], url) 


使 用 可 选 的 状态 码 跳 转 到 url， 状 态 码 status 默认 为 302 Found 





Tes.charset 


设置 字符 集 ， 默 认为 utf8 





res.send([bodylstatus], [body]) 


发 送 一 个 响应 





res.json([statuslbody], [body]) 


返回 一 个 JSON 响应 








res.jsonp([statuslbody], [body]) 


Tes.type(type) 


返回 一 个 支持 JSONP 的 JSON 响应 


设置 Content-Type 
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( 续 表 ) 














方法 或 属性 说 明 

res.sendfile(path, [options], [fn]]) 传输 指定 path 的 文件 ， 根 据 扩展 名 自动 设置 响应 头 
res.attachment([filename]) 把 path 当 作 附件 传输 ， 通 常 浏览 器 会 弹出 一 个 下 载 文件 的 窗口 
Se loi a lien ee 当 作 附件 传输 ， 通 常 浏览 器 会 弹出 一 个 下 载 文 件 的 窗口 ， 








res.render(view, [locals], callback) 泻 染 view， 同 时 向 callback 传 入 泻 染 后 的 字符 串 





23.4.1 write、end、send 输出 响应 到 客户 端 


在 前 面 代 码 中 出 现 的 console.log 是 将 响应 输出 控制 台 ， 只 能 在 服务 器 端 看 到 ， 而 要 让 用 
户 一 一 客户 端 看 到 信息 ， 则 需要 使 用 Response 对 象 提供 的 方法 。 

和 大 多 数 Web 编程 语言 一 样 ，write() 方 法 是 最 常用 的 ， 比 如 给 客户 端 打 印 一 个 hello 
world 的 代码 : 

app.get('/hello', function(req, res){ 


res.write('hello world!'); 


res.end('end'); // 如 果 没 有 这 一 句 ， 浏 览 器 会 不 停 地 等 待 
Os 


end() 方 法 也 有 类 似 功能 ， 更 重要 的 是 它 是 结束 或 中 止 输出 的 方法 ， 即 到 这 里 时 服务 器 会 
把 所 有 前 面 准备 好 的 响应 信息 发 送 给 用 户 和 浏览 器 。 

和 end() 方 法 类 似 的 还 有 send( 方 法 ， 它 和 前 者 一 样 也 可 以 接收 响应 字符 串 ， 和 前 者 不 同 
的 地 方 是 ， 它 自动 补足 了 一 些 响应 头 信息 ， 如 图 23-11 所 示 。 


个 http://loca-3000/hello/ x | 全 你 httg:/1lecav30001helley # | 他 http /1/1 
加 leah 有 目 昌 ”Cc || 圆 - 百 户 全 Gl: OOD cA- 5 





hello world!end 


党 2 lle| mol[P 


六 清除 ”保持 | 全 部 | HDL CSS JavaScript XER| 
有 





BGETN 2000k locahost:3000 127.0.0.1:3000 | 
科 信 息 响 讼 胃 在 


响 座 条 信息 
Comnertion Meer 
Me 1 Dee 2013 14:45:55 Cr 
Tag With Content-Type tert/htal: charset=utf-e 
Epre: Date Won, 16 Dec 2013 14:47-36 GNT 
Etag “16528305" 
请 来 天 信 名 X-Powered-By Ezpr 


图 23-11 send 自动 补充 响应 头 信息 





在 一 个 路 由 处 理 中 ， 如 果 使 用 了 send() 方 法 ， 那 么 在 send0 之 前 的 代码 中 出 现 write0 方 法 
则 会 提示 : 
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Error: Can't set headers after they are sent. 


当然 ，write0 输 出 的 内 容 还 是 会 发 送 到 客户 端 去 ， 而 且 服 务 端 控制 台 会 报 500 错误 提 
示 ， 浏 览 器 客户 端 则 依然 是 200 状态 。 


23.4.2 JSON、JSONP 输出 响应 到 客户 端 


现在 的 Web 应 用 和 JavaScript 交互 越 来 越 多 ， 而 JSON 作为 网 络 间 数 据 交 换 最 流行 的 格 
式 得 到 了 Express 的 强力 支持 ， 要 输出 JSON 到 客户 端 是 极其 简单 的 事情 ， 如 下 面 的 代码 所 
示 。 
app.get('/testjson/', function(req, res){ 
res.json({user:’z3f’}); 
JJ 
app.get('/testjsonp/', function(req, res){ 


res.jsonp({user:’2z3f}); 
Hs 


json() 方 法 会 将 JSON 输出 到 客户 端 ， 同 时 会 将 Content-Type 响应 头 修 改 为 
application/json。jsonp() 方 法 则 是 专门 处 理 JSONP 的 方法 ， 和 前 者 不 同 的 地 方 是 后 者 需要 传 
递 一 个 callback 参数 ， 如 图 23-12 所 示 。 


) 夏 nzilIa Firefoxr 
办 时 工具 人 玫 助 中 
http://localhost:3000/testjson/ x 
"OTD cl-se PH- 
typeof oo === ’ function’ 8 ooff | 
oo 


‘User”: “z: 
四 


训 守 6 2 三 |r| css WN vox[|[P | 日 @ 加 | 关于 ar) css 本 por Ga 
总 ”清除 保持 | 全 部 | HTIL CSS JavaScript XHR 图 片 所 请 说 ”清除 保持 | 全 部 | HTIL_ CSS _ Javascript XHR 图 片 插件 











GET ?call 200 of。 locahost:3000 127.0.0.1:3000 | GS GET /test 200 OF locahost:3000 1270.0.1300 六 12ms 
名 数 和 信息 响 度 四 ] 条 信息 咱 认 JSON 运 丰 
响 诺 信息 响 诺 信和 名 


nection Kapralive Connection Yaalive 
Ce Length 5: Content-Length 1 
emt The tat/ evaseript; charsetzatte ‘Cortent Type spoliction/ json: charsetcatte 
Re yon 4 Dae 0 4904 37 Or BRE Nea te bee 009 15.14 .0 om 


图 23-12 json 方法 和 jsonp 方法 的 对 比 


如 果 没 有 传递 callback 参数 ， 那 么 jsonp() 方 法 就 会 被 当成 json() 方 法 来 处 理 。 这 是 
Express 比 其 他 Web 服务 器 更 加 实用 的 一 个 功能 ， 对 Web 项 目 要 用 到 的 这 些 东西 封装 得 非 
常 好 。 
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23.4.3 设置 cookie 

对 于 一 个 网 站 来 说 ，cookie 是 必 不 可 少 的 ， 所 以 Express 也 对 cookie 操作 进行 了 封装 处 
理 ， 读 写 一 个 cookie 很 简单 ， 代 码 如 下 : 

// 写 入 一 个 cookie，100 秒 后 过 期 


Fres .cookie ("user","z3f", {maxAge:100000}); 

// 在 控制 台 输出 获取 后 的 cookie 对 象 

console.log (req.cookies); 

cookie 的 值 既 可 以 是 字符 串 ， 也 可 以 是 JSON 对 象 ， 这 就 需要 用 到 cookies 中 间 件 ， 即 增 
加 如 下 代码 来 启用 


app.use (express.cookieParser()); 
Express 中 提供 了 一 系列 对 cookie 配置 的 属性 ， 具 体 如 表 23-5 所 示 。 
表 23-5 Express 提供 的 cookie [options] 
属性 说 明 
过 基 时 间 
便捷 设置 expires， 它 是 一 个 从 当前 时 间 焉 起 的 友 数 
限定 目录 , 扶 认 为 









[aa | emg 


23.4.4 其 他 响应 控制 


响应 控制 ， 除 内 容 (如 文本 、html、 图 片 、 多 媒体 等 以外， 就 控制 cookie 和 响应 头 。 
表 23-4 中 的 attachment() 方 法 也 是 对 响应 头 进行 设置 ， 然 后 发 送 文件 ， 使 浏览 器 认为 是 下 载 
文件 ，download() 方 法 则 是 在 其 基础 上 进行 深加工 ，sendfile() 方 法 则 是 分 析 文件 后 将 状态 设置 
和 文件 格式 结合 起 来 。 

当 读 者 熟悉 HTTP 协议 及 其 原理 后 ， 对 于 请 求 和 响应 控制 的 理解 就 会 更 加 容易 。 


23.5 相关 参考 


e@ http://expressjs.com/en/api.html 一 一 Express 官网 最 新 英文 版 API。 
® https://github.com/visionmedia/express/tree/master/examples 一 一 Express 官方 示例 。 
® https://github.com/senchalabs/connect#readme 一 一 Connect 框架 官网 API。 
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第 24 章 构造 一 个 基于 Socket 的 聊天 系统 


一 切 尼 文件 (Socket 是 其 操作 模型 的 一 种 特例 ) ! 
一 一 UNIX/Linux 基本 理念 


文件 操作 模型 一 般 都 是 打开 、 读 写 和 关闭 ，Socket 也 类 似 ， 即 打开 、 通 信和 关闭 。 于 是 ， 
在 网 络 编程 中 有 豪 言 道 ; 一切 皆 Socket! 虽 有 些 极端 ， 但 也 反映 了 当下 网 络 编程 的 实际 情况 。 
本 章 主要 知识 点 : 


® Socket.io 


@ Node.js 连接 多 种 数据 库 


24.1 建立 Socket 服务 器 


Socket 通常 称 为 “ 套 接 字 ”， 起 源 于 UNIX， 是 UNIX 的 一 种 通信 机 制 。 微 软 window 在 
采用 前 自己 曾 用 过 类 似 的 机 制 一 一 DDE， 不 过 在 很 早 的 时 候 微软 也 支持 Socket。 发 展 至 今 ， 
Socket 已 成 为 系统 必 备 的 组 成 部 分 、 网 络 编程 中 的 主流 方式 。 

Socket 常 被 描述 为 进程 间 通 信 机 制 ， 让 人 容易 陷入 单机 进程 的 误区 ， 在 网 络 中 使 用 IP 和 
端口 组 合 来 标识 某 个 进程 ， 这 样 一 来 两 两 之 间 就 能 够 实现 通信 〈 如 图 24-1 所 示 ) 。 


Socket 通 信 模 型 











图 24-1 Socket 通信 模型 


习惯 上 所 说 的 C/S 就 是 指 Socket 的 两 端 ， 一 是 客户 端 ， 二 是 服务 端 。B/S 中 的 B 是 指 浏 
览 器 ， 一 种 特定 的 客户 端 ，S 同样 是 服务 端 。 


Socket 是 很 底层 的 操作 ，Node.js 实际 上 就 是 用 Javascript 指令 去 调用 底层 的 C++， 虽 然 
自 带 的 NET 模块 就 能 够 实现 ， 但 是 比较 烦琐 ， 对 于 初学 者 来 说 比较 困难 ， 如 果 使 用 第 三 方 开 
发 的 组 件 ， 如 SocketIO， 对 Socket 服务 端 和 客户 端 就 封装 得 非常 完善 ， 而 且 兼容 性 强 ， 易 于 
上 手 。 接 下 来 就 看 一 下 如 何 利用 Socket.IO 建立 服务 端 。 





24.1.1 安装 Socket.IO 


Socket.IO 是 Guillermo Rauch 创建 的 WebSocket API，Guillermo Rauch 是 LearnBoost 公司 
的 首席 技术 官 以 及 LearnBoost 实 的 首席 家 
Socket.IO 在 npmjs.com 官网 上 是 非常 













它 是 Nodejs 的 一 个 模块 ， 同 样 通过 命 
定 版 本 请 在 后 面 @ 上 版 本 号 ， 安 装 完 


欢迎 的 ， 
版 ， 如 需要 指定 





令 npm install socket.io 就 能 安装 最 新 
成 后 如 图 24-2 所 示 。 





= 


而 管理 员 : Nodejs command prompt 


:node\socket npn install socket.io 


> wwsee.14.5 install G:\node\socket node_nodules \uws 
> node-gyp rebuild > build_log.txt 2)81 11 exit 日 


ENOENT: nm h file or directory, open ’G: 
created a lockfile as package-lock + you shouldl| 
ENOEI uch file or directory。 open “Gzno| 
ocket No d on 
cket No repository field. 
‘et No README data 
socket No license field. 


+ socket.ioB2 
added 48 pack 














图 24-2 用 npm 安装 SocketIO 





到 这 里 Socket.IO 已 经 
构 ， 如 图 24-3 所 示 。 


了 黄 


装 完成 ， 用 命令 npm list 可 以 查看 其 依赖 的 其 他 插件 及 其 组 织 结 





画 管理 员 : Nodejs command prompE 村 "4 = x | 


:node\socket npn list 
ode\socket 
cket .ioB2 .8.4 
debuge2 





— base64-arraybufferCg.1.5 














图 24-3 Socket.IO 的 组 成 
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准备 工作 完成 ， 要 实现 聊天 室 ， 还 需要 分 别 编写 服务 端 和 客户 端 代码 ， 接 下 来 就 介绍 如 
何 分 别 构建 聊天 室 的 服务 端 和 客户 端 。 


24.1.2 聊天 室 服务 端 


聊天 室 程序 最 核心 的 功能 就 是 将 每 个 客户 端 发 送 来 的 信息 广播 出 去 ， 以 完成 集体 聊天 的 
目的 。 图 24-4 就 是 基于 Socket.IO 构造 的 简易 聊天 室 。 


[可 阪 Pd 立 人 日 肆 看 Wj 中 于 0) ITRD 大 WU 二 二 口 X] 


和 了 已 咎 32- 多 | 医 htpWbcahosta6/ S|- Bx] > 














图 24-4 简易 聊天 室 


既然 是 基于 SocketIO 的 ， 那 么 服务 器 端 就 需要 用 到 SocketIO。 将 前 面 安装 的 socketio 
的 node_ modules 下 的 内 容 复制 一 份 放 置 到 聊天 室 目 录 (如 CNNodevchatroom ) 下 的 
node_ modules 目录 中 (Ci\Node\chatroom\node_modules\) ， 以 便服 务 端 代码 调用 ， 如 【范例 
24-1】 所 示 。 


【范例 24-1 创建 聊天 室 服务 端 】 


i Var http = require("http") 

上: rsSocket = require("socket.io") 

:fs = require("fs"); 

4. Var app,io; 

5 app = http.createServer (function(req, res) { 

6. // 读 取 本 程序 运行 位 置 的 client .html 文件 

a fs.readFile( dirname+"/client.html",function(err, data){ 
8. res.writeHead (200); // 设 置 200HTTP 状态 
9. res.end(data); 

10. por 

Ls 1); 

12. ”//HTTP 服务 器 绑 定 的 端口 

用语 app.listen(86); 

LA io = socket.listen (app); 
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1 全 // 设 置 socket . 


io 日 志 级 别 


Lk io.set ("log level", 1); 

IE // 监 听 链 接 事件 

8 io .sockets .on ("connection",function (socket) 1{ 

下 95 // 响 应 客户 端 msg 事件 

0 socket .on("msg",function(data){ 

2 console.log("Get a msg from client ..."); 
225 // 控 制 台 输出 接收 到 的 数据 

A console.log (data); 

24. // 把 收 到 的 信息 广播 出 去 

六 socket .broadcast .emit ("chat message",data); 
6 Py 

27. 1); 


将 【范例 24-1】 保 存 为 appjs， 存 放 在 项 目 根 目录 下 〈C:\Nodevchatroom) ， 用 命令 node 


app 运行 程序 即 可 将 聊天 室 服务 端 启 动 ， 服 务 端 控制 台 效 果 如 图 24-5 所 示 。 





i Nodojs cml rept note mo cl El 





6: node \chat room>: 
G: node \chat room)e: 


C: Wsers\Adninistrator)g: 


:node\chatroom)node app 


图 24-5 服务 端 控制 台 


如 果 没 有 设置 Socket.IO 的 日 志 级 别 ， 通 过 图 24-5 还 能 看 到 更 加 详细 的 日 志 信息 ， 由 于 
日 志 必 然 对 性 能 有 一 些 影响 ， 所 以 投产 环境 中 还 是 将 日 志 控制 在 适当 范围 比较 好 。 





24.2 HTML5 中 的 Web Socket 


Web Socket 是 HTML5 规格 中 一 个 非常 重要 的 新 特性 ， 新 的 Web Socket 旨 在 解决 HTTP 


协议 的 结构 限制 ， 是 





-种 浏览 器 与 服务 器 间 进 行 全 双 工 通信 的 网 络 技术 。Web Socket 通信 协 


议 于 2011 年 被 IETF 定 为 标准 RFC 6455， 且 已 被 W3C 定 为 标准 。 
基本 的 互联 网 通信 协议 都 会 用 RFC 文件 详细 说 明 ， 由 此 可 见 ，Web Socket 对 于 互联 网 的 





基础 特性 及 重要 性 。 

















24.2.1 Web Socket 协议 


Socket 通信 开发 最 重要 的 就 是 协议 。 像 通信 软件 (QQ、MSN) 、 杀 毒 软件 (360、 金 
山 ) 、 电 信 软 件 〈 短 信 、 通 话 ) 等 行业 软件 都 有 自己 独特 的 协议 。 有 了 协议 ， 就 可 以 无 视 语 
言 和 平台 ， 大 家 都 可 以 为 这 个 平台 做 开发 ， 就 像 使 用 同一 种 语言 交流 一 样 ， 在 通信 程序 开发 
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中 ， 协 议 起 到 了 跨 平台 、 跨 语言 的 重要 作用 ，Web Socket 也 不 例外 。 

由 于 历史 原因 ，Web Socket 曾 一 度 没 有 定稿 ， 所 以 各 个 浏览 器 厂商 ， 如 了 正 、FF、 
Chrome 和 Safari， 对 其 实现 有 所 不 同 ，IE 9 及 其 以 前 版 本 没有 实现 Web Socket 标准 ， 但 是 现 
在 越 来 越 多 的 浏览 器 已 经 开始 支持 标准 。 不 过 ， 在 有 些 较 旧 版 本 的 浏览 器 中 实现 的 是 一 些 草 
案 版 本 ， 常 见 的 有 draft-76、draft-17 等 。 





24.2.2 Nginx 对 Web Socket 的 支持 


Nginx (engine x) 作为 一 个 高 性 能 的 HTTP 和 反 向 代理 服务 器 ， 从 1.3 版 本 开始 对 Web 
Socket 协议 提供 了 大 力 支 持 ， 使 得 开发 者 除 传统 的 HTTP 通信 之 外 ， 将 不 再 需要 面 对 其 他 复 
杂 的 工作 环境 。 

由 于 面临 着 不 断 增加 的 高 性 能 、 低 延迟 的 通信 需求 的 挑战 ，Web Socket 协议 进入 Nginx 
成 为 内 核 功能 ， 也 实 实在 在 地 方便 了 Web 开发 者 和 服务 提供 商 提 供 基 于 Nginx 平台 的 服务 。 

Web Socket 程序 执行 允许 开发 者 在 开发 和 支持 实时 Web 应 用 程序 和 平台 时 扩展 和 简化 
Nginx。Web Socket 在 Nginx 中 的 支持 ， 使 得 Web 开发 者 减少 了 不 必要 的 工作 。 


24.2.3 Web Socket 常用 API 


window.WebSocket 提供 一 组 可 用 于 Web Socket 编程 的 对 象 、 方 法 和 属性 ， 详 情 如 表 24-1 
所 示 。 


表 24-1 window.WebSocket 对 象 的 方法 和 属性 





























方法 或 属性 说 明 

send(data) 使 用 WebSocket 对 象 发 送 数据 到 服务 器 
close(code, reason) 关闭 WebSocket 对 象 

onclose 当 套 接 字 关闭 时 调用 的 事件 处 理 程序 

onerror 当 出 现 错误 时 调用 的 事件 处 理 程序 

onmessage 通知 接收 到 消息 的 事件 处 理 程序 

onopen 当 WebSocket 对 象 已 连接 时 调用 的 事件 处 理 程序 
ul 获取 套 接 字 的 当前 URL 

readyState 报告 WebSocket 对 象 连接 的 状态 

binaryType 由 onmessage 接收 的 二 进 制 数据 格式 





WebSocket 的 语法 非常 简单 ， 要 创建 一 个 WebSocket 连接 的 代码 如 下 : 


Var Socket = new WebSocket('ws://localhost:86')7 
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然后 就 可 以 通过 相关 方法 和 属性 完成 更 加 复杂 的 Web 应 用 。 由 于 WebSocket 对 象 并 非 浏 
览 器 历来 就 支持 ， 所 以 就 出 现 了 像 Socket.IO 或 者 Dojo WebSocket 这 样 的 框架 ， 通 过 它们 使 
不 同 浏览 器 得 以 兼容 。 


24.3 在 Node.js 中 操作 数据 库 


数据 库 历来 是 Web 应 用 中 占据 绝对 地 位 的 重要 角色 ， 在 Nodejs 中 同样 如 此 ， 尤 其 是 在 
当下 这 个 大 数据 时 代 里 ， 数 据 库 更 是 必 不 可 少 ， 只 是 通过 JavaScript 操作 数据 库 ， 在 几 年 前 
是 根本 无 法 想象 的 事情 ， 而 今 成 为 时 下 最 热门 的 方式 。 


24.3.1 操作 MS SQL Server 


MS SQL Server (简称 MSSQL) 是 微软 公司 提供 的 数据 库 服务 器 ， 也 是 Windows 平台 下 

常见 的 数据 库 ， 所 以 微软 官方 也 推出 了 Nodejs 平台 下 操作 自家 产品 MSSQL 的 工具 
dn 

通过 下 面 的 命令 即 可 将 msnodesql 安装 到 指定 目录 : 


npm install msnodesql 


笔者 用 一 个 绿色 集成 的 SQL 2000 工具 GSQL 来 快速 搭建 数据 库 环 境 ， 因 为 是 绿色 环 
境 ， 下 载 下 来 解压 即 可 运行 ， 运 行 效果 如 图 24-6 所 示 就 表示 启动 成 功 。 












目眩 | 启 贱 | 好 名 | 9 BE| 加 计划 | 加 工具 | 也 刘 | > 好 
pi 是 。 清除 tenpdb 畴 舌 库 , 习 
or et hee 
servar SQL Server 已 准备 好 进行 客户 身 : 

Firexalil 防火墙 局 动 元 毕 。 
TryCon 。 启动 成 功 ， 尝 试 使 用 Ado 连接 
局 动 数 惨 库 “twpdb”。 


GqLAdnin 作 可 以 使 用 以 下 机 器 名 连接 当 色 stL。 
DIETCROINGQL 远程 "9 168 0.157 TT69” 本地 


sia i 190 160.0 157 / 08:00:27:13:10:69 /317 
测试 连接 成功 ， 连 接 字符 囊 












it 
yDB\ 中 的 梁 二 库 文件 | 


Version 6.5.0.4 | Malt 9508163.com | 若 读 QQ: 356001 | 。 网 站 WipijwwSiSoften | 


图 24-6 GSQL 环境 








数据 库 环境 现在 已 经 搭建 ， 用 SQL Server Management Studio 连接 到 本 地 地 址 
127.0.0.1:7788， 然 后 创建 一 个 测试 数据 库 nodetest 和 一 个 user 表 ， 如 图 24-7 所 示 。 
同时 ， 还 需要 设置 数据 登录 用 户 名 和 密码 ， 在 开发 环境 下 可 以 直接 设置 sa 用 户 ， 位 于 
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“安全 性 ”选项 下 ， 如 图 24-7 所 示 。 接 下 来 就 可 以 用 JavaScript 来 连接 MSSQL 数据 库 了 ， 代 
码 如 【范例 24-2】 所 示 。 


Www IN 


加 oa ouw 心 


.Microsoft SQL Seroer Nanagement Studin Express 
文件 入 宫 由 视 目 轨 工具 中 牢 口 如 社区 如 帮助 0 

也 页 建 查 彩 四 口语 成 习 二 回避 忆 习 天 防卫 
对 梨 资 源 千 理 器 v3Xx 首要 





PEER A 
 @ 12.0.0.1, Tr03 Car Server 0.(E 


量 襄 数 血库 国 表 





全 aiTDAdninistrato 
田 加 服务 器 角色 
出国 服务 器 对 旬 
< 
[DD 








图 24-7 管理 MSSQL 数据 库 


【范例 24-2 JavaScript 操 作 MSSQL】 


var sql = require("msnodesql") 
// 链 接 数据 的 字符 串 

conn_str = "Driver={SQL Native Cl ient};Server={127.0.0.1,7788}; 

Database={nodetest};uid=sa;PWD=123;"; 

sql.open(conn str, function (err, conn) { 
if (err){ // 如 果 链 接 出 错 则 退出 

console.1og (err) ;return; 

} 
console.log('open ok...'); 
conn.query ("insert into [user] ([name])values('nodejs')"); 


// 插 入 一 条 记录 
conn .query("insert into [user] ([name])values('z3f')") 7 
// 插 入 一 条 记录 
conn .query("select * from [user] where [name] = 'z3f'",function 


(err,result){ 
console.log("query ok..."); 
console.log (result) 
Eor (var i=0;i<result.length;i++){ 


console.log(result[i]l .name) ; // 遍 历 输出 查询 到 的 结果 集 


Ds; 
We 


代码 思路 很 简单 ， 连 接 数 据 库 后 插入 两 条 记录 ， 然 后 查询 指定 的 记录 ， 结 果 如 图 24-8 所 示 。 
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C\WINDOWS\system32\cmd.exe 











图 24-8 msnodesql 操 作 SQL 2000 数据 库 


在 执行 的 时 候 ， 可 能 因为 不 同 版 本 的 数据 库 (如 SQL 2005、SQL 2008 等 ) 或 不 同 操作 
系统 的 原因 ， 会 出 现 SQL state IM002 和 08001 错误 提示 。 

对 于 不 同 的 数据 库 版 本 ， 需 要 设置 正确 的 ODBC 了 驱动 【范例 24-2】 代 码 第 3 行 中 的 
Driver 名 称 ) ， 选 择 计算 机 上 安装 的 驱动 程序 ， 如 图 24-9 所 示 。 


TT EE 到 到 
用 户 SH | 系统 DSH | 文件 0SY 驱动 程序 | 跟踪 | 连接 池 | 关于 











公司 <] 





8888883 引 3 全 | 
和 
88888 8 





中 





8SRR 有 人 8 和 


== 
得 序 所 许 - 8 到 数据 尖 取 信息 - 
鲜 和 











Ce ] | sa | ww | 
图 24-9 查看 ODBC 驱动 





图 24-9 中 的 “ODBC 数据 源 管 理 器 ”可 通过 “控制 面板 ”一 “管理 工具 ”一 “数据 源 
(ODBC) 工 具 ” 打 开 ， 其 他 操作 系统 略 有 差异 ， 另 外 ，SQL 语法 不 在 本 书 讨论 范围 之 内 ， 请 
读者 查看 相关 书籍 和 资料 。 


24.3.2 操作 MySQL 


MySQL 和 MSSQL 一 样 ， 也 是 非常 流行 的 数据 库 ， 如 何 用 JavaScript 在 Node.js 下 链接 
MySQL 数据 库 呢 ? 

首先 ， 在 本 地 快速 搭建 一 个 MySQL 环境 ， 这 里 笔者 选用 集成 开发 工具 AppServ， 通 过 
图 24-10~ 图 24-14 下 载 、 安 装 并 配置 好 MySQL 环境 。 
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第 24 章 构 
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于 Socket 的 聊天 系统 


I RP XD EY WO IAD BD — SS X | 
i 心 个 -高 [日 nup://www.sogou.com/sogou?qJery=AppServ+&pd=AWTo5 如 | ”| 如 珊 庄 





























是 Appserv - 掉 和 和 失 去。 > > 





新旧 网页 | 本 T 到 | 
人 换 洛 为 爷 推 荐 AppSerr 2.5.9 | 由 一 键 下 斥 办 x 
中 加 
Po i 4 


网 页 软件 编程 百科 文 沫 ”论坛 更 多 - 




















全 部 时 间 appserv-AppServiNetwork [9 

一 天 内 Stats Activity AIAX Script What is AppServ? How to install AppSen How io use AppSem and d . 

ia iectory structure Developer Team Download Now! Version History NEWS Archive 打 
一 由 内 wwappsermetwork_comy - 2014-1-4 -快照 - 巴 监 | 
一 | 





图 24-10 下 载 AppServ 


Apache HTTP Server Information MySQL Server Configuration 
Please enter your servers nformation. Configure the MYSQL Server instance, 


Server Name (eg www.appsernetwork.com) 
Pafme 

Administrator's Emal hddress (e.g webmasterggmalcom) 
[eaGz3fme 

党 HTTP Port (Defsut :80) 








Nulsoft Ingtal 



































人 沦 项 ) 可 看 Q) 关 宙 如 帮助 吃 














Completing the AppServ 2.5.9 Setup EF Administrator 
Wizard hy a Adninistrator 


AppServ 2.5.9 has been nstaled on your computer, 
Adninistrator 
Chck Finish to dose this ward ee 


SYSTEN 

SYSTEN 

回 sart apache Adninistrator 

SYSTEN 

回 sart msQt SegouCloud exe Adaninistrator 
SogouExplorer exe Adninistrator 

SogouExplorer exe Adninistrator 

SogouExplorer exe Adninistrator 

SogouExplorer. exe Adninistrator 

SogouExplorer exe Adninistrator 

SogouExplorer exe Adninistrator 


口 显示 所 有 用 户 的 进程 GE) 


Eda 


1888R888883838333838 
但 


ha2wmBswmn 
计 
































图 24-13 安装 完成 图 24-14 安装 完成 启动 的 进程 


AppServ 内 置 了 phpMyAdmin， 在 运行 之 前 需要 找到 config.inc.php 文件 ， 将 设置 的 数据 
库 用 户 名 和 密码 做 如 下 配置 : 
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$cfg['Servers'] [$i]['user'] = NFOOEt // MySQL user 
$cfg['Servers'][$i]l['password'] = '123123@';// MySQL password (only needed 
配置 文件 一 般 在 安装 目录 下 可 以 找到 ， 如 C:\AppServwww\phpMyAdmin。 然 后 在 浏览 器 

中 输入 本 地 访问 地 址 http:WlocalhosyphpMyAdmin/， 会 要 求 输入 数据 库 管理 账号 和 密码 ， 登 录 


成 功 后 在 内 置 测试 数据 库 test 下 新 建 一 个 node 表 ， 为 后 面 做 开发 准备 ， 详 情 如 图 24-15 所 











示 。 
15 PD 让 TD 各 
€3O hep:/ocahostiprp yAdmn/ EF 
W hocalhost localhost /t 
表 服务 器 : localhost ” 民 数据 库 : test + 国 表 :node 上 
二 二 于 折 和 图 S 出 图 mpor 从 党 作 侍 沪 空 加 


时 加 站 和 sal 2 


node” 已 经 建立 。 












国 表 "test 
[全 回回 辐 加 
数据 库 一 SQL 音 询 - 
[ 编 回 ] [创建 PHP 代 玛 ] 








是 ”NULE 








phpMyAdmin 管理 MySQL 数据 库 
-个 路 径 ， 如 


接 下 来 就 是 用 命令 npm install mysql 来 安装 Nodejs 的 mysql 模块 ， 指 定 
Ci\Node\mysql， 安 装 成 功 后 的 效果 如 图 24-16 所 示 。 


1 
1 
nysql-2.8 
ql-2.0.0-m 
178.8.3 
js/1.8.1 
1/8.8.3 


plication Data\npn\nod| 








图 24-16 安装 mysql 模块 














准备 工作 完成 后 ， 就 可 以 用 JavaScript 来 操作 MySQL 数据 库 了 ， 其 模式 或 API 和 
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MSSQL 操作 非常 相似 ， 具 体 代码 请 看 【范例 24-3】。 


oamouw 必 wm 


己 
Se 


b 
人 
3 
14. 
[二 中 
16。 
Ts 
18. 


ES 
2 
2 
六 
235= 
24. 
25. 
26. 
27。 
28 . 
29. 
30 . 
E 
32 . 
33。 
34。 
35。 
36. 
37。 
38 . 
3 
40. 
41. 


【范例 24-3 JavaScript 操作 MySQL】 


var mysql = require("mysql") // 引 用 模块 
var client = mysql.createConnection({ / /创建 连接 
whost" "iIoCalhost"y 





nsor me rooC, 
"password":"123123@" 
人 
client.query ("USE test",function(error,results){ 
if (error){ // 出 错时 退出 
console.log("ClientConnectionReady Error:"+error.message) 7 
client.end();return; 
} 
InsertData (client); 
WR 
// 插 入 数据 
InsertData=function(){ 
var values=["Hello!","node 2 mysql at:"+Math.random()]; 
client.query("INSERT INTO node SET title=?,info=?",values,function 
(error,results){ 
if(error){ // 出 错时 退出 
console.log("InsertData Error:"+terror.message); 
client.end();return; 
1 
console.log("Inserted: "+results.affectedRows+" row."); 
console.log("Id inserted: "+results.insertId); 
3 
GetData (client); 
] 7 
// 查 询 数据 
GetData=function (client){ 
client.query ("SELECT * FROM node",function(error,results,fields){ 
if (error) {// 出 错时 退出 
console.log("GetData Error:"+terror.message); 
client.end();return; 


1 

console.log("Results:"); 

console.log (results); // 控 制 台 输出 记录 集 

if(results.length>0){ 
var rs = results[0]; // 取 得 第 一 条 记录 
console.log ("Title:"trs.title); // 输 出 指定 字段 
console.log("info:"+rs["info"]); 

1 
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42. } 


43. yx 

44. client.end(); // 关 闭 数据 库 连接 
45. console.log("Connection closed."); 

46. ] 7 


将 【范例 24-3】 的 代码 保存 到 C:Nodevmysq\ 目 录 下 的 app.js 文件 中 ， 用 命令 node app.js 
即 可 运行 ， 运 行 效果 如 图 24-17 所 示 。 
INDOWS\system32\cmd.exe 


Lnode app 


’, info: "node 2 mysql at 521559838457， 》 


58838457 








图 24-17 操作 MySQL 数据 库 


24.3.3 操作 MongoDB 


与 MSSQL 和 MySQL 不 同 ，MongoDB 是 非 关 系 型 数据 库 ， 相 对 于 Node.js 的 应 用 环境 
来 说 ， 它 支持 的 JSON 数据 格式 非常 受 开发 者 欢迎 ， 也 是 呼声 很 高 的 一 种 NoSQL 数据 库 

在 MongoDB 官网 下 载 一 个 安装 包 ， 笔 者 使 用 32 位 Windows 版 本 ， 解 压缩 后 即 可 运行 。 
解压 到 指定 目录 (如 D:sofhmongoDB ) 后 ， 再 创建 一 个 存放 数据 库 文件 的 目录 〈 如 
D:\soft\mongoDB\db) ， 可 以 是 任意 位 置 ， 然 后 通过 命令 行 提 示 符 到 bin 目录 下 运行 命令 
mongod --dbpath=D:softwmongoDBvdb， 如 果 数 据 库 目录 不 正确 ， 则 可 能 报错 ， 运 行 成 功 时 本 
地 路 径 http://localhost:28017/ 可 查看 mongoDB 的 各 类 运行 信息 ， 否 则 将 无 法 访问 此 URL。 

接着 ， 需 要 另外 打开 一 个 CMD 窗口 ， 切 换 到 指定 目录 〈 如 Ci\Node\mongoDB) ， 执 行 
命令 npm install mongoDB 来 安装 mongoDB 操作 模块 。 

然后 ， 另 外 打开 一 个 CMD 窗口 ， 切 换 到 mongoDB 安装 目录 〈(D:\softmongoDB\bin) ， 
执行 命令 mongo 进入 mongoDB 的 控制 台 ， 其 中 有 很 多 操作 数据 库 的 命令 ，show dbs 就 可 以 
查看 当前 有 哪些 数据 库存 在 ， 如 图 24-18 所 示 。 





> show dbs 
local  @.03125GB 














图 24-18 mongoDB 数据 库 
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MongoDB 和 关系 型 数据 库 操作 数据 最 大 的 不 同 在 于 不 是 使 用 SQL 语法 ， 可 以 通过 【 范 


例 24-4】 进 行 对 比 。 


ownamwmewn 


叫 
-oO 


FF FF 
an 心 w 


上 呈 
va 


Dep 
Om 


N N N 
WO IN 


wwwDDNDNDN 
Peioo Da wm 心 


【范例 24-4 MongoDB 数据 库 的 操作 】 


var mongoDB = require('mongoDB'); // 引 用 模块 
Var server = new mongoDB.Server('localhost',27017, {auto reconnect:true}); 
// 连 接 数 据 库 
Var db = new mongoDB.Db ('testnode' server, {safe:true}); 
// 打 开 数 据 库 
db.open (function (err, db){ 
if (err) { // 如 果 报 错 则 提示 
console.log (err); 
}elsel{ 
// 打 开 记 录 集 
db.createCollection('nodemsg',functionl(err, collection){ 
ifl(err)t{ 


console.log (err); 


}elsel{ 
var data = {"id": new Date().getSeconds(),"msg" 
"node msg","code" : Math.random()}; 
// 插 入 数据 
collection.insert(_data, {safe:true},function (err, 
result){ 


console.log(result); 
// 更 新 id=20 的 记录 
collection.update ({id:20}, {$set:{"msg":"update 
msg"}}, {safe:true}, functionl(err, result){ 
]) 7 
// 查 询 id>20 的 记录 
collection.find({"id":{"$gt":20}}). toArray 
(function(err,docs){ 
console.log("find id>20"); 
console.log(docs); 
db.close(); // 关 闭 连 接 


Ds; 
有 这 


Ds; 
将 【范例 24-4】 的 代码 保存 到 C:\NodevmongoDB 目录 下 的 appjs 文件 中 ， 然 后 运行 命令 


node appjs 启动 。 首 次 运行 时 ，mongoDB 会 自动 创建 数据 testnode 或 相应 的 记录 集 
nodemsg， 后 续 运 行 时 则 直接 执行 相应 的 逻辑 代码 。 在 【范例 24-4】 中 ， 每 次 运行 时 会 增加 
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条 记录 ， 并 且 更 新 id 等 于 20 的 记录 信息 ， 并 且 找 到 id 大 于 20 的 记录 显示 出 来 ， 显 示 完 毕 
后 关闭 数据 库 连接 ， 运 行 效果 如 图 24-19 所 示 。 











图 24-19 mongoDB 操作 数据 
不 能 用 传统 的 关系 型 数据 库 思 维 来 理解 NoSQL 数据 库 和 架构 相应 的 业务 需求 ， 像 重要 
的 存储 过 程 、 触 发 器 这 类 关系 型 数据 ， 常 见 功能 都 是 不 提供 的 ， 而 它 的 优势 在 于 数据 结构 简 
单 ， 支 持 流行 的 JSON 格式 ， 对 某 些 业务 处 理 起 来 高 效 便捷 。 当 然 ，MongoDB 数据 库 也 不 是 
万 能 的 ， 需 要 根据 实际 需求 选择 。 


24.4 完善 聊天 系统 


有 了 聊天 室 的 服务 端 ， 当 然 也 需要 客户 端 ， 最 主要 的 客户 端 就 是 浏览 器 ，SocketIO 提 
供 了 兼容 浏览 器 客户 端的 东西 ， 所 以 大 大 减少 了 开发 者 不 必要 的 工作 量 。 





24.4.1 聊天 室 客户 端 


相信 读者 已 经 在 【范例 24-1】 中 看 到 “dirname+"/client.html"” 这 样 的 代码 ， 这 就 是 发 
送 给 客户 端的 内 容 。 服 务 端 代码 相当 简单 ， 那 么 客户 端的 代码 是 否 如 服务 端 代 码 这 样 简洁 
呢 ? 答案 是 肯定 的 ， 详 见 【 范 例 24-5】。 


【范例 24-5 聊天 室 客户 端 代码 】 


<!DOCTYPE html> 

<html> 

<head> 

<title> 简 易 聊 天 室 </title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="/socket.io/socket.io.js"></script> 

<script> 


oarODNDPp 


(function(){ 
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9. var socket = io.connect('http://127.0.0.1:86');// 端 口 与 服务 器 一 致 

1 socket.on('chat message',function (msg){ 

msgbox (msg .msg); // 显 示 服 务 器 推送 信息 到 聊天 窗口 
2 ]) 7 

3 window.sendMsg = function(){ 

i var inpt = document.getElementById('put'); 

5 var str = inpt.value; 

h msgbox (str); // 显 示 自 己 发 送 的 信息 到 聊天 窗口 
LT socket .emit ('msg', {msg:str}); // 发 送 到 服务 器 

18. inpt.value = ""; // 清 空 发 送 消息 窗口 

19. inpt.focus(); // 让 焦点 定位 到 发 送 消息 窗口 
20. 

人 function msgbox (str){ 

本 document .getElementById('box') .innerHTML += str + '<br />'; 

23 } 

2 A 

250 </soript> 

26. <style type="text/css"> 

27. #box{overflow: auto;width:500px;height:100px;border:1lpx solid #dcdcdc;} 
28. #put{width:430px;} 

29. </style> 

30. </head> 

31. <body> 

32. ”<h2> 简 易 聊天 室 </h2> 

335 <div id="box"></div> 

34. <input type="text" id="put" /> 

EE 六 <input type="button"” value=" 发 送 消息 ”onclick="sendMsg () ; "> 

36. </body> 

37. </html> 


将 【范例 24-5】 保 存 为 client.html 并 存放 在 项 目 根 目录 下 〈(C:\Node\chatroom) ， 在 浏览 


器 中 输入 http://127.0.0.1:86/ 即 可 看 到 如 图 24-4 所 示 的 运行 效果 。 由 于 网 址 是 本 地 计算 机 使 用 
的 ， 因 此 如 果 要 在 局 域 网 或 广域网 访问 ， 那 么 需要 修改 对 应 的 网 址 。 需 要 注意 的 是 ， 
socket.io.js 文件 是 SocketIO 提供 的 ， 我 们 自 定义 的 代码 文件 中 是 没有 此 文件 的 ， 它 对 Web 
Socket 提 供 了 良好 的 封装 处 理 ， 其 API 的 详细 说 明 如 表 24-2 所 示 。 


24.4.2 Socket.IO 常见 API 


SocketIO 的 目标 是 支持 任何 的 浏览 器 、 任 何 设备 ， 不 仅 前 端 统一 ， 而 且 后 端 也 能 共用 ， 


其 中 常用 的 方法 如 表 24-2 所 示 。 
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表 24-2 Socket.IO 常用 的 方法 
说 明 

连接 到 服务 器 

事件 处 理 











方法 


connect(url) 








on(event , callback, 






emit(event , data, callback) 
of(path 








由 于 前 后 端 均 使 用 JavaScript， 因 此 这 些 方法 中 的 on 和 emit 都 是 通用 的 ， 只 是 参数 传递 
种 微 不 同 ， 其 中 on 方法 不 仅 兼 容 WebSocket 原 有 的 一 些 事件 ， 还 能 自 定义 事件 ， 如 服务 端 代 
码 中 用 的 msg 事件 和 客户 端 是 保持 一 致 的 ， 只 有 这 样 才能 通信 。 通 过 这 个 方法 ， 可 以 很 方便 
地 自 定义 各 类 交互 事件 ， 能 够 较 快速 地 完成 开发 。 

of 方法 能 够 在 同一 个 端口 下 开设 多 个 不 同 通信 应 用 。 例 如， 服务 器 localhost 如 果 这 样 : 











var chat = io.of('/chat') .on('connection', function (socket) { 


}); 


那么 客户 端 连接 时 就 需要 加 上 路 径 : 


var chat = io.connect('http://localhost/chat'); 
var news = io.connect('http://localhost/news'); 


24.5 相关 参考 


® https://www.npmjs.com/ 一 一 W3C 官方 提供 的 在 线 验 证 CSS3 工具 。 

https://tools.ietforg/html/draft-hixie-thewebsocketprotocol-76 一 一 SocketIO 支持 的 hixie- 
76 版 本 。 

® https://tools.ietf org/html/draft-ietf-hybi-thewebsocketprotocol-16 一 一 Socket.IO 支持 的 
hybi-16 版 本 。 

® https://socket.io/ 一 一 Socket.IO 官网 。 

® https://github.com/WindowsAzure/node-sqlserver 一 —msnodesql 官网 。 

® http://docs.sequelizejs.com/ 一 一 多 合 一 集成 数据 操作 框架 .。 
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